SVG Clipping: Firefox ignores transformation of clipping shape - css

Question

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

Answer 1

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>