SVG - Попытка выяснить, как поддержать EDGE, используя SVG вместо clipPath - PullRequest
Новая
       6

SVG - Попытка выяснить, как поддержать EDGE, используя SVG вместо clipPath

0 голосов
/ 29 августа 2018

Я использовал путь клипа свойства CSS, который позволил мне создать следующее:

https://jsfiddle.net/fLe6np59/36/

Глупо я не убедился, что он работает на EDGE и в идеале на IE11.

Я прочитал в Интернете, что мне нужно использовать элемент Clippath, чтобы он работал в Edge и IE11.

Вот где я заблудился. Я не уверен, как я могу это сделать. Я попытался обернуть мой прямоугольник в элемент clipPath и добавить свойство css в clippath через идентификатор, но это, похоже, не работает. 

clipPath {
    clip-path: polygon(52% 41%,100% 45%,100% 46%,51% 59%,0 49%,0 48%);  
}


/*Firefox*/
clip-path: url("#clipPath");

Было бы здорово, если бы кто-то указал мне верное направление.

1 Ответ

0 голосов
/ 29 августа 2018

Я не уверен, что точно понимаю, чего вы пытаетесь достичь. Зачем использовать CSS-путь клипа, если вы уже используете SVG?

Я попытался обернуть мой прямоугольник в элемент clipPath и добавить свойство css в clippath через идентификатор

Похоже, вы мало исследовали, как работают SVG clipPaths. В Интернете есть множество примеров того, как работают clipPaths. Кроме того, вы могли прочитать спецификацию SVG.

Но в любом случае SVG-эквивалент вашего пути клипа CSS выглядит следующим образом: 

<svg class="svg-responsive" viewBox="0 0 320 60" width="100%" height="100%" preserveAspectRatio="none">
  <defs>
    <clipPath id="myClipPath" clipPathUnits="objectBoundingBox">
      <polygon points="0.52, 0.41, 1, 0.45, 1, 0.46, 0.51, 0.59, 0, 0.49, 0, 0.48"/>
    </clipPath>
  </defs>

  <rect class="shape" width="100%" height="100%" clip-path="url(#myClipPath)"/>
       
</svg>
...