SVG Clipping：Firefox 忽略了裁剪形状的转换答案

【问题标题】：SVG Clipping: Firefox ignores transformation of clipping shapeSVG Clipping：Firefox 忽略了裁剪形状的转换
【发布时间】：2019-05-02 19:12:56
【问题描述】：

我有一个带有四个彩色块的 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);
}

【问题讨论】：

标签： css firefox svg css-transforms clip-path

【解决方案1】：

这是known bug。作为一种解决方法，您可以使用 SVG 转换 attribute 代替 CSS 属性。请注意，为了完全兼容浏览器，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>

【讨论】：