23

Normally, the <clipPath> element hides everything that is outside the clip path. To achieve the opposite effect - that is to "cut out" something from the image - i want to use two paths in the clipPath and the clip-rule="evenodd" attribute. Basically, I want to "xor" the clip paths.

But it doesn't work. It shows the region "ORed":

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
        <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" />
        <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" />
    </clipPath>     

 <rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>

EDIT:

My problem is that AFAIK <mask> doesn't work in iOS WebKit.

tanguy_k
  • 11,307
  • 6
  • 54
  • 58
tillda
  • 18,150
  • 16
  • 51
  • 70

1 Answers1

35

It's much easier to do what you're after with a mask, see this example. Here's the mask definition:

<mask id="maskedtext">
  <circle cx="50%" cy="50%" r="50" fill="white"/>
  <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text>
</mask>

Regions that are white inside the mask will be kept, everything else will be clipped away.

Here's another example that uses clipPath instead, is a bit trickier since you need to use a path element to get the clip-rule to apply. The clipPath that uses clip-rule there looks like this:

<clipPath id="clipPath1">
  <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 1
    Thanks. I forgot to add that I can't get `` working at iOS WebKit. Using `` works, but it is hard to specify an ellipse by points, for example. – tillda Jan 27 '11 at 15:45
  • You can specify an ellipse using the arc path command or a couple of curve commands, see http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands. – Erik Dahlström Jan 27 '11 at 20:42
  • Thanks very much. I'd seen other examples but your answer is the one which explicitly says, the mask needs `fill="white"`. – Nick P Jun 17 '23 at 20:56