Css SVG—尝试找出如何使用SVG而不是clipPath来支持EDGE

我使用CSS属性剪辑路径创建以下内容：

愚蠢的是，我没有确保它在EDGE和理想的IE11上工作

我在网上读到，我需要使用Clippath元素，这样它才能在Edge和IE11中工作

这就是我迷路的地方。我不知道我怎么能做到。我曾尝试将rect包装在clipPath元素中，并通过ID将css属性添加到clipPath中，但这似乎不起作用

clipPath {
    clip-path: polygon(52% 41%,100% 45%,100% 46%,51% 59%,0 49%,0 48%);  
}


/*Firefox*/
clip-path: url("#clipPath");

---

如果有人能给我指出正确的方向，那就太好了

我不确定我是否完全理解您想要实现的目标。既然已经在使用SVG，为什么还要使用CSS剪辑路径

我已经尝试将rect包装在clipPath元素中，并通过ID将css属性添加到clipPath中

听起来您并没有对SVG Clippath的工作原理做太多研究。网上有很多关于Clippath如何工作的例子。另外，您还可以阅读SVG规范

但无论如何，与CSS片段路径等效的SVG如下所示：

您可能想阅读这篇关于SVG和CSS剪辑的文章。