我正在尝试将 css 动画应用于 svg 蒙版。虽然它在Chrome上工作正常(第73节)，但我无法让它在Firefox上工作(第66节)。
我不知道为什么我当前的示例(见下文)在 Firefox 上不起作用
注意：根据我可以使用吗，Firefox 66不需要任何前缀即可transform工作。我打算为旧版本支持添加它们，但这并不能解决我当前的问题。
这是我问题的一个小例子：(在我的解释中添加了用于命名对象的 HTML ID)
.canvas {
border: solid 1px lime;
background: lightblue;
}
.animated {
transform-origin: center center;
animation: myAnimation 1s ease forwards;
}
@keyframes myAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(0.8);
}
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div>
<svg class="canvas" viewBox="0 0 100 100" width="150px" height="150px">
<defs>
<mask id="gmask" fill="white">
<!-- Mask is defined here as a black circle in a white background -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle id="maskCircle" class="animated" cx="50" cy="50" r="25" fill="black" />
</mask>
</defs>
<!-- Pink circle is animated in both browsers -->
<circle id="testCircle" class="animated" cx="50" cy="50" r="50" fill="pink" />
<circle id="outerCircle" class="outer" cx="50" cy="50" r="25" mask="url(#gmask)" />
</svg>
</div>
</center>
</body>
</html>我正在尝试将 25 号的圆形maskCircle从0transform: scale到0.8，以便在作为蒙版应用于outerCircle(也是 25 码)时创建一个甜甜圈形状。
在Chrome上，我可以在Chrome中获得预期的输出视图;而在Firefox中，动画没有应用，因此蒙版圆圈保持其完整大小(25)并在Firefox中完全隐藏outerCircle视图。
(好吧，几乎完全隐藏了它，因为我可以看到圆圈应该在的位置有一条小线，但即使没有动画，它也会显示，所以我相信这是蒙版/圆圈没有以完全相同的大小渲染并且与我的问题无关)。
作为测试，我将相同的动画应用于一个简单的 svg 对象(testCircle，粉红色圆圈)，并且工作正常。 这让我认为这个问题与面具有关。
我想为蒙版制作动画是很常见的，应该是可能的，所以我的猜测是我做错了什么 chrome 很好，但不是 Firefox。
知道我如何让它同时适用于两者吗？
正如罗伯特所说，最好使用适用于所有现代浏览器的 SVG 蒙版。
我没有使用比例()动画，而是使用了圆半径的动画。这更容易，因为您不必担心缩放后定位圆圈。
你有一个复杂的动画形式，所以在黑色环之前的第一阶段，我应用了一个蒙版动画组合。
<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>
和圆半径的环外动画
<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>
下面是完成的代码。
.canvas {
border: solid 1px lime;
background: lightblue;<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div>
<svg class="canvas" viewBox="0 0 100 100" width="150px" height="150px">
<defs>
<mask id="gmask" fill="white">
<!-- Mask is defined here as a black circle in a white background -->
<rect x="0" y="0" width="100" height="100" 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>
</defs>
<!-- Pink circle is animated in both browsers -->
<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>
<circle id="outerCircle" class="outer" cx="50" cy="50" r="25" mask="url(#gmask)"/>
</svg>
</div>
</center>
</body>
</html>这是使用 SMIL 完成的方式：
.center{margin:0 auto;width:150px;}
.canvas {
border: solid 1px lime;
background: lightblue;
}<div class="center">
<div>
<svg class="canvas" viewBox="-50 -50 100 100" width="150px" height="150px">
<defs>
<mask id="gmask" fill="white">
<!-- Mask is defined here as a black circle in a white background -->
<rect x="-50" y="-50" width="100" height="100" fill="white" />
<circle id="maskCircle" class="animated" r="25" fill="black" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="scale"
values="0;.8"
calcMode="spline"
keySplines="0.4 0 0.2 1"
dur="1s"
fill="freeze"
/>
</circle>
</mask>
</defs>
<!-- Pink circle is animated in both browsers -->
<circle id="testCircle" class="animated" r="50" fill="pink">
<animateTransform
attributeType="XML"
attributeName="transform"
type="scale"
values="0;.8"
calcMode="spline"
keySplines="0.4 0 0.2 1"
dur="1s"
fill="freeze"
/>
</circle>
<circle id="outerCircle" class="outer" r="25" mask="url(#gmask)" />
</svg>
</div>
</div>我正在使用calcMode="spline" keySplines="0.4 0 0.2 1"而不是缓和。
请参阅此内容： SVG SMIL 动画转换缓动
我正在使用fill="freeze"而不是 CSSforwards.我希望它有所帮助。