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

时间:2018-06-13 13:27:53

标签: css svg polygon clip-path

例如,我有一个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类?

1 个答案:

答案 0 :(得分:3)

转换非常简单。该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);
  ...
}