SVG裁剪: Firefox忽略裁剪形状的转换

Question

我有一个SVG与四色块，我想剪辑一个旋转的椭圆。在Chrome和Safari中，它可以正常工作，但是Firefox (Mac上的63.0.3)忽略了椭圆的转换。

下面是一个说明这个问题的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);
}

Answer 1

这是一个已知臭虫。作为解决办法，您可以使用SVG transform属性而不是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>

​