将多边形剪贴路径转换为Microsoft Edge支持的“剪贴路径"的最简单方法svg? [英] Easiest way to convert polygon clip-path to Microsoft Edge supported "clippath" svg?

问题描述

例如，我有一个css类，向其应用了多边形剪切路径，如下所示:

For example, I have a css class with a polygon clip-path applied to it like so:

   .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类将其应用于所有对象(如上述示例)?

But I understand for this to work in Edge and IE I need to use the "clippath" property with svg points. Is there an easy way to convert the above polygon to an svg shape and apply it to everything with the .services-image-left class like the above sample?

推荐答案

转换非常容易.该CSS剪辑路径的等效项为:

The conversion is pretty easy. The equivalent of that CSS clip path would be:

<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>

然后使用以下代码引用它:

Then you reference it with:

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

这篇关于将多边形剪贴路径转换为Microsoft Edge支持的“剪贴路径"的最简单方法svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！