剪辑路径在firefox [%values]中不起作用

Question

我试图在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和其他浏览器吗？

Answer 1

您可以在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中没有支持.

Answer 2

我也为此挣扎了很多。我涵盖的内容与上述答案类似，但我发现的一个解决方案是使用 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>