我试图在mozilla中运行svg clip-path,但它不起作用.
.mask-1 {
-webkit-clip-path: polygon(0% 0%,58% 0%,39% 81.8%,0% 81.8%);
clip-path: polygon(0% 0%,0% 81.8%);
}
它完美地在铬中工作.任何人都可以通过mozilla和其他浏览器来帮助我吗？
解决方法
您可以在Firefox中使用内联SVG(如下面的代码所示),其中您的积分是百分比/ 100.由于属性clipPathUnits,掩码将响应.
<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>
请参考svg
.mask-1 {
-webkit-clip-path: polygon(0% 0%,0% 81.8%);
clip-path: polygon(0% 0%,0% 81.8%);
-webkit-clip-path: url("#clip-shape");
clip-path: url("#clip-shape");
}
我很广泛地努力,因为我的svg动态添加到页面.通过js应用具有延迟(或pageload)的剪辑路径css属性解决了我在FF中的问题.
我的知识没有IE的支持.
