如何在Firefox中将CSS动画应用于SVG掩码？

我正在尝试将css动画应用到svg掩码。虽然它在Chrome（73版）上运行良好，但我无法在Firefox（66版）上运行

我不明白为什么我当前的示例（见下文）不能在Firefox上运行

注意：根据，Firefox 66不需要任何前缀

transform

即可工作。我计划为旧版本的支持添加它们，但这并不能解决我当前的问题

下面是我的问题的一个小例子：（在我的解释中添加了用于命名对象的HTML ID）

.canvas{
边框：固体1px石灰；
背景：浅蓝色；
}
.动画{
变换原点：中心；
动画：myAnimation 1s轻松前进；
}
@关键帧myAnimation{
0% {
变换：比例（0）；
}
100% {
变换：比例（0.8）；
}
}

---

以下是使用SMIL的方法：

.center{边距：0自动；宽度：150px；}
.帆布{
边框：固体1px石灰；
背景：浅蓝色；
}

---

正如Robert所说，最好使用适用于所有现代浏览器的SVG掩码

我没有使用scale（）动画，而是使用了圆半径的动画。这更容易，因为您不必担心缩放后圆的定位问题

你有一个复杂的动画形式，所以在黑环之前的第一阶段我应用了一个面具动画组合

<mask id="gmask" fill="white">
 <circle id="maskCircle" class="animated" cx="50" cy="50" r="0" fill="black" >
  <animate id="an1" attributeName="r"  dur="0.8s" values="0;20" fill="freeze" />
 </circle>
</mask>

CSS动画在Firefox中的掩码上不受支持，正如您所发现的那样。虽然SMIL是受支持的，但如果您使用它，它将在Firefox和Chrome中工作

<circle id="testCircle"  cx="50" cy="50" r="25" fill="pink"  >
      <animate attributeName="r" begin="an1.end" dur="0.2s" from="25" to="40" 
         fill="freeze"/>
</circle>