Самый простой способ конвертировать многоугольный клип-путь в 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"msgstr "свойство с пунктами 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);
  ...
}