Clip-path doesn't work in firefox [% values]
Solution 1
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.
Solution 2
I've also struggled a lot with this. I'm covering similar ground as the above answer, but a solution I found was to add the CSS inline using a Style tag. It's ugly, but works at least.
<div class="clip-this" style="background:red; height: 200px; width: 200px;"></div>
<!-- this lets Firefox display the angle -->
<svg class="clip-svg">
<defs>
<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
<polygon points="0.404 0, 1 0, 1 1, 0 1" />
</clipPath>
</defs>
</svg>
<style>
.clip-this {
clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
clip-path: url("#swipe__clip-path");
}
</style>
user4821826
Updated on July 31, 2022Comments
-
user4821826 almost 2 years
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?
-
oriadam over 7 yearsThis is the only thing that worked for me! I would never have guessed that I need to take the rule out of the css and into the html body. Thanks for that tip
-
kach almost 7 yearsThis worked for me ! but I want to add a css transition to it ?