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。解决方法是，可以使用SVG转换属性而不是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>

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

1 个答案: