将多边形剪辑路径转换为 Microsoft Edge 支持的“剪辑路径”svg 的最简单方法？答案

【问题标题】：Easiest way to convert polygon clip-path to Microsoft Edge supported "clippath" svg?将多边形剪辑路径转换为 Microsoft Edge 支持的“剪辑路径”svg 的最简单方法？
【发布时间】：2018-06-13 13:27:53
【问题描述】：

例如，我有一个带有多边形剪辑路径的 css 类，如下所示：

   .services-image-left {
    -webkit-clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%);
    clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%); }

但我知道要在 Edge 和 IE 中工作，我需要使用带有 svg 点的“clippath”属性。有没有一种简单的方法可以将上述多边形转换为 svg 形状并将其应用于具有 .services-image-left 类的所有内容，如上面的示例？

【问题讨论】：

标签： css svg polygon clip-path

【解决方案1】：

转换非常简单。该 CSS 剪辑路径的等价物是：

<svg width="0" height="0">
  <clipPath id="myclippath" clipPathUnits="objectBoundingBox">
    <polygon points="0, 0, 0.97, 0, 0.83, 1.0, 0, 1.0"/>
  </clipPath>
</svg>

然后你引用它：

.services-image-left {
  clip-path: url(#myclippath);
  ...
}

【讨论】：

谢谢！有没有办法可以将该代码添加到我的 CSS 样式中？或者还有其他方法可以实现吗？
没有。 SVG 剪辑路径定义必须位于页面中的 <svg> 中。但是您可以将它应用到 CSS 规则中的类（如上所示）。
我需要在页面某处添加您的第一个代码 sn-p（只是粘贴在某处？），然后将第二个代码 sn-p 添加到我的 CSS 中？
是的。剪辑路径需要在 <svg> 标记中（答案已更新）。然后更新您的 CSS 规则。为 SVG 添加 clip-path，在其他之前。
我仍然看不到这在 Edge 上工作。如果有人知道我做错了什么，请告诉我：codesandbox.io/s/clip-path-with-ieedge-support-tukrk?file=/src/…

【解决方案2】：

最好的解决方案是忘记 Edge。使用一些库来检测浏览器并告诉访问者安装一个真实的。花费额外的时间来修复（必要的）事情是不值得的，这项工作是给微软的。稍微激进但更有效。

改变主意ˇˇ

【讨论】：

这不是答案。
我已尝试根据接受的答案解决此问题，但它不适用于较旧的非 Chromium Edge 浏览器。这篇文章有一些道理，尤其是当 stackoverflow 做同样的事情时。
继续我的思路，它也是使用 CSS 特征查询 的一个选项，仅当出于美观原因需要它时。有了这个，你 1. 要么为 booby 浏览器的元素定义一个简单的外观，然后在 @supports (...) { ... } 规则中级联（？）为了好看，2. 或者做相反的事情：先好看，简单看@support not (...){ ... } after 但是，我建议使用 1. case bc IE 不支持 at-supports，所以你最好将基本样式定义为简单样式