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

Question

例如，我有一个 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 中工作，我需要将“clippath”属性与 svg 点一起使用。有没有一种简单的方法可以将上面的多边形转换为 svg 形状，并将其应用到具有 .services-image-left 类的所有内容，如上面的示例？

Answer 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);
  ...
}