Easiest way to convert polygon clip-path to Microsoft Edge supported “clippath” svg?

问题

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%); }

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?

回答1:

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

来源：https://stackoverflow.com/questions/50838485/easiest-way-to-convert-polygon-clip-path-to-microsoft-edge-supported-clippath