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

【问题标题】：SVG - Trying to figure out how to support EDGE using an svg instead of clipPathSVG - 试图弄清楚如何使用 svg 而不是 clipPath 来支持 EDGE
【发布时间】：2019-02-04 01:19:30
【问题描述】：

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

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

我没有确保它在 EDGE 和理想的 IE11 上也能正常工作。

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

这是我迷路的地方。我不确定我该怎么做。我尝试将我的矩形包装在一个 clipPath 元素中，并通过一个 ID 将 css 属性添加到剪辑路径，但这似乎不起作用。

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


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

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

【问题讨论】：

您可能想阅读tutorial，了解 SVG 和 CSS 中的剪辑。

标签： css svg clip-path

【解决方案1】：

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

我尝试将我的矩形包装在一个 clipPath 元素中，并通过一个 ID 将 css 属性添加到剪辑路径

听起来您没有对 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>

【讨论】：