最简单的方法将多边形剪辑路径转换为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中工作我需要使用带有svg点的“clippath”属性。有没有一种简单的方法可以将上面的多边形转换为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);
  ...
}