SVG Clipping: Firefox игнорирует преобразование формы отсечения - PullRequest
Новая
       43

SVG Clipping: Firefox игнорирует преобразование формы отсечения

0 голосов
/ 30 ноября 2018

У меня есть SVG с четырьмя цветными блоками, которые я хочу обрезать вращающимся эллипсом.Он работает, как и ожидалось, в Chrome и Safari, но Firefox (63.0.3 на Mac) игнорирует преобразование эллипса.

Вот CodePen , который иллюстрирует проблему.

SVG 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
  <defs>
    <clipPath id="myClip">
      <ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" />
    </clipPath>   
  </defs>

  <g class="clip-this">
    <rect class="color-1" x="0" y="0" width="250" height="250" />
    <rect class="color-2" x="250" y="0" width="250" height="250" />
    <rect class="color-3" x="0" y="250" width="250" height="250" />
    <rect class="color-4" x="250" y="250" width="250" height="250" />
  </g>
</svg>

CSS 

#ellipse{
  transform:rotate(-30deg);
  transform-origin:center;
}
.color-1,.color-4{
    fill:#ababab;
}
.color-2,.color-3{
    fill:#3a3a3a;
}
svg {
    max-width: 400px;
}
.clip-this{
  clip-path: url(#myClip);
}

1 Ответ

0 голосов
/ 30 ноября 2018

Это известная ошибка .В качестве обходного пути вы можете использовать атрибут SVG-преобразования вместо свойства CSS.Обратите внимание, что для полной совместимости с браузером функция преобразования не должна иметь единиц для чисел, а центр вращения отмечается в координатах пространства пользователя. 

.color-1,.color-4{
	fill:#ababab;
}
.color-2,.color-3{
	fill:#3a3a3a;
}
svg {
	max-width: 400px;
}
.clip-this{
  clip-path: url(#myClip);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
  <defs>
    <clipPath id="myClip">
      <ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" transform="rotate(-30, 250, 250)" />
    </clipPath>   
  </defs>

  <g class="clip-this">
    <rect class="color-1" x="0" y="0" width="250" height="250" />
    <rect class="color-2" x="250" y="0" width="250" height="250" />
    <rect class="color-3" x="0" y="250" width="250" height="250" />
    <rect class="color-4" x="250" y="250" width="250" height="250" />
  </g>
</svg>
...