剪辑路径在 Firefox 中不起作用 [% 值] [英] Clip-path doesn't work in firefox [% values]
问题描述
我正在尝试在 mozilla 中运行 svg clip-path 但它不起作用.
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%);
}
它在 chrome 中完美运行.任何人都可以帮助我使用 mozilla 和其他浏览器吗?
It works in chrome perfectly. Can anyone can help me out with mozilla and other browsers?
推荐答案
您可以在 Firefox 中使用内联 SVG(如下面的代码所示),其中您的点数是百分比/100.由于属性 clipPathUnits
掩码将响应.
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>
参考svg之类的
.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");
}
我为此苦苦挣扎,因为我的 svg 是动态添加到页面的.通过 js 延迟(或页面加载)应用剪辑路径 css-property 解决了我在 FF 中的问题.
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.
据我所知,IE 不支持.
There is no support in IE by my knowledge.
这篇关于剪辑路径在 Firefox 中不起作用 [% 值]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!