CODEWITHSUNDEEP
cssfirefoxsvgcss-transformsclip-path
Jakob Förster
Jakob Förster

Reputation: 27

SVG Clipping: Firefox ignores transformation of clipping shape

I have an SVG with four coloured blocks that I want to clip by a rotated ellipse. It works as expected in Chrome and Safari, but Firefox (63.0.3 on Mac) ignores the transformation of the ellipse.

Here is a CodePen that illustrates the issue.

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);
}

Upvotes: 1

Views: 370

Answers (1)

ccprog
ccprog

Reputation: 21821

This is a 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 must not have units for the numbers, and the center of rotation is noted in userspace coordinates.

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

Upvotes: 2

Related Questions