剪辑路径在火狐中不起作用 [% 值]

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属性解决了我在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>

Answer 3

除了@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");
}

 <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>

Answer 4

我尝试过其他解决方案，但无法使它们发挥作用，所以我决定完全忽略clippath，而是使用fill属性。幸运的是，我的用例裁剪被限制为裁剪svg的%，所以实现起来并不困难。

使用透明的线性梯度，我得到了这样的东西：

<svg>
    <defs>
        <linearGradient id="starFraction">
            <stop offset="50%" stop-color="currentColor"/>
            <stop offset="50%" stop-color="transparent"/>
        </linearGradient>
    </defs>
    <svg fill="url('#starFraction')" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.5 0l1.771 4.617L13 4.966l-3.625 3.2L10.521 13 6.5 10.363 2.479 13l1.146-4.833L0 4.966l4.729-.349z"/>
    </svg>
    <svg fill="none" version="1.1" viewBox="0 0 13.01 13.08" xmlns="http://www.w3.org/2000/svg">
        <path d="m6.507 1.452c0.4691 1.226 0.9381 2.453 1.407 3.679 1.279 0.09504 2.559 0.1901 3.838 0.2851-0.9827 0.8724-1.965 1.745-2.948 2.617 0.3054 1.297 0.6107 2.593 0.916 3.89-1.071-0.7072-2.142-1.414-3.213-2.122-1.071 0.7072-2.142 1.414-3.213 2.122 0.3053-1.297 0.6107-2.593 0.916-3.89-0.9827-0.8724-1.965-1.745-2.948-2.617 1.279-0.09505 2.559-0.1901 3.838-0.2851 0.4691-1.226 0.9382-2.453 1.407-3.679z" stroke="currentColor" stroke-width="1.038"/>
    </svg>
</svg>

正如你所看到的，我可以用线性梯度重叠不同的svg，最终得到部分结果。

虽然对于更复杂的剪裁形状可能有点难以获得所需的结果，但如果复制对象并对每个副本应用不同的渐变，则仍然可以实现。