我试图在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%, 58% 0%, 39% 81.8%, 0% 81.8%);
}
它完美适用于镀铬。任何人都可以帮助我使用Mozilla和其他浏览器吗?
答案 0 :(得分:12)
你可以在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%, 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应用带有延迟(或页面加载)的clip-path css-property解决了我在FF中遇到的问题。
据我所知,IE中没有任何支持。
答案 1 :(得分:4)
我也因此而苦苦挣扎。我上面的答案涵盖了类似的基础,但我找到的解决方案是使用Style标签添加CSS内联。它很难看,但至少起作用。
<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>
&#13;
答案 2 :(得分:0)
除了@ atomictom的答案之外,我发现如果你将div的类更改为id,那么你不必内联CSS
body{
background: lightgreen;
}
#clip-this {
background:red;
height: 200px;
width: 200px;
clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
clip-path: url("#swipe__clip-path");
}
&#13;
<div id="clip-this"></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>
&#13;