I am trying to run svg clip-path in mozilla but it doesn't work.
.mask-1 {
-webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
}
It works in chrome perfectly. Can anyone can help me out with mozilla and other browsers?
You can use an inline SVG (as the code below shows) in Firefox, where your points are the percentage / 100. Because of the attribute clipPathUnits
the mask will be responsive.
<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0.58 0, 0.39 0.818, 0 0.818" />
</clipPath>
</defs>
</svg>
Refer to the svg like
.mask-1 {
-webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
-webkit-clip-path: url("#clip-shape");
clip-path: url("#clip-shape");
}
I struggled extensively with this, since my svg was dynamically added to the page. Applying the clip-path css-property with a delay (or pageload) via js solved my problems in FF.
There is no support in IE by my knowledge.