Css SVG剪辑：Firefox忽略剪辑形状的转换

我有一个带有四个彩色块的SVG，我想用一个旋转的椭圆来剪裁它。它在Chrome和Safari中可以正常工作，但Firefox（Mac上的63.0.3）忽略了椭圆的变换

下面是一个例子来说明这个问题

SVG

这是一个很好的例子。作为一种解决方法，您可以使用SVG转换属性而不是CSS属性。请注意，为了实现完全的浏览器兼容性，数字不能有单位，旋转中心以用户空间坐标表示

.color-1、.color-4{
填充物：#阿巴巴；
}
.color-2、.color-3{
填充物：#3a3a；
}
svg{
最大宽度：400px；
}
.剪掉这个{
剪辑路径：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" />
    </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>

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