css - SVG-试图弄清楚如何使用svg而不是clipPath支持EDGE

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

https://jsfiddle.net/fLe6np59/36/

愚蠢的是，我不确定它是否可以在EDGE和理想的IE11上运行。

我已经在线阅读了我需要使用Clippath Element的内容，以便它可以在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 clipPaths的工作方式进行过多研究。网上有很多关于clipPaths如何工作的示例。另外，您可能已经阅读了SVG规范。

但是无论如何，与您的CSS剪辑路径对应的SVG如下：

<svg class="svg-responsive" viewBox="0 0 320 60" width="100%" height="100%" preserveAspectRatio="none">
  <defs>
    <clipPath id="myClipPath" clipPathUnits="objectBoundingBox">
      <polygon points="0.52, 0.41, 1, 0.45, 1, 0.46, 0.51, 0.59, 0, 0.49, 0, 0.48"/>
    </clipPath>
  </defs>

  <rect class="shape" width="100%" height="100%" clip-path="url(#myClipPath)"/>

</svg>

关于css - SVG-试图弄清楚如何使用svg而不是clipPath支持EDGE，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52074267/