Navid Nazarian Navid Nazarian - 4 months ago 6x
CSS Question

SVG clipPath issue

I have a svg tag with polygon elements inside that which are the same as each other. but when I put one of them inside a clipPath and link it to an image or div, the position of the clipped polygon will change. what is the problem about it?
It would be appreciated if anyone can help.

Here is the html code:

<img class="" src="" alt="">
<svg version="1.1" xmlns="" viewBox="379 -325 1024 700">
<clipPath id="botRightDeltaClip">
<polygon points="1184.4,88.9 1002,363.6 818.2,88.9 "/>
<polygon points="461.2,373.9 728.2,-28.2 997.3,373.9 "/>
<polygon points="1077.6,-326.1 810.6,76 541.6,-326.1 "/>

<polygon class="deltaLines" points="1184.4,88.9 1002,363.6 818.2,88.9 "/>
<polygon class="deltaLines" points="461.2,373.9 728.2,-28.2 997.3,373.9 "/>
<polygon class="deltaLines" points="1077.6,-326.1 810.6,76 541.6,-326.1 "/>

codepen here.

Here is my problem screen shot:

enter image description here


This is happening because in your clipPath, the coordinates of the circle are being treated as being relative to the top left of the page. Whereas the circle coordinates in the SVG are relative to the top left of the <svg>. But the SVG is affected by the default margins/paddings on the HTML <body>. And so is not positioned in the same place.

If you get rid of the body margins in the standard way:

  padding: 0;
  margin: 0;

you will see they both line up.