SVG clipPath to clip the *outer* content out

Question

Normally, the element hides everything that is outshide the clip path. To achieve the opposite effect - that is to \"cut out\" something from t

Answer 1

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>