SVG clipPpath multiple polygon elements does not work because xor-CodePudding

This is first time I use SVG to make transparent areas on thr picture(marked red) and probably I have very naive question, I wrote this code according to

<img src="https://i.stack.imgur.com/iZ7xG.jpg" style="clip-path: url(#myClip);">

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip"  clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0 1, .54 .99, .5682 .156, .746 .151, .7397 .557, .51 .508, .54 .99, 1 1, 1 0" />
      <polygon points="0 0, 0 1, .737 1, .747 .321, .816 .321, .81 .666, .74 .645, .74 1, 1 1, 1 0" />
      /*  It doesn't work, but if delete one of them so its work with only one polygon */
    </clipPath>
  </defs>
</svg>

CodePudding user response：

It is not very suprising this does not work. You are trying to make "inverse" clip paths. Clip paths hide anything that is outside their shape. but you want to hide only what is inside a shape. For that, you draw a torus consisting of the bounding box and your shape, and then cut a line through to make one continous polygon.

Now think about how multiple shapes in a clip path work: everything that is inside one of the shapes is shown. Everything that is outside both shapes is hidden.

The way your polygons are formed, the areas you want to hide are inside one shape and ouside the other. Accordingly, they remain visible.

In this case, it is much easier to use a mask. It works by coloring shapes. Everything that is white (luminance = 1) is shown, everything that is black (luninance = 0) is hidden.

<img src="https://i.stack.imgur.com/iZ7xG.jpg" style="mask: url(#myMask);">

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask"  maskContentUnits="objectBoundingBox">
      <!--white surrounding rectangle: visible-->
      <rect width="1" height="1" fill="white" />
      <!-- black cutout shapes: hidden -->
      <polygon points=".556 .518, .5682 .156, .746 .151, .7397 .557" fill="black" />
      <polygon points=".747 .321, .816 .321, .81 .666, .74 .645" fill="black" />
    </mask>
  </defs>
</svg>

CodePudding user response：

You can also use a compound path with alternating path directions.
As described here: