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

这是一个known bug. As a workaround, you can use the SVG transform attribute instead of the CSS property. Note that for full browser compatibility the transform function数字不能有单位，旋转中心在用户空间坐标中注明。

.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>

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

SVG Clipping: Firefox ignores transformation of clipping shape

css

firefox

svg

css-transforms

clip-path