火狐浏览器蒙版故障中的SVG动画

Question

我第一次尝试用svg对血滴的填充进行动画处理：

动画掉落

动画在

大多数导航器上运行良好(在不支持SVG动画的IE11上具有静态回退(，但Firefox在掩码上显示了一些不良故障。该错误在Windows上的最新版本的Firefox中可见，尽管Mac版本没有问题。

您可以在此处看到故障的屏幕截图：

火狐故障

"波浪"是一个带有填充图案和水平重复动画的矩形，嵌套在 2 个嵌套内，第一个是蒙版，第二个是垂直动画。

.vagueContainer-5 {
  -moz-animation: fillup-5 10s 1 ease-out forwards;
  -webkit-animation: fillup-5 10s 1 ease-out forwards;
  animation: fillup-5 10s 1 ease-out forwards;
}
@keyframes fillup-5 {
  0% { transform: translateY(470px); }
  100% { transform: translateY(224px); }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 528">
  <defs>
    <pattern id="water" width=".25" height="1.1">
      <path fill="#E20020" d="M300 740V0c-75 0-75 14.4-150 14.4S75 0 0 0v740h300z"></path>
    </pattern>
<path id="drop" fill="#FFF" d="M388.9 417.6c-33.3 33.3-79.8 49.1-119.7 49.1s-85.4-15.8-118.8-49.1-45.1-69.7-45.1-104.7 14.5-78 31.1-101.2c16.6-23.3 64-78 93.3-116.6s39.9-67.2 39.9-67.2S283 57 312.3 95.6s67.7 83.8 90.5 116.2C419.4 235.1 434 277.9 434 313s-11.8 71.3-45.1 104.6z"/>
		<mask id="drop_mask">
			<use xlink:href="#drop"/>
		</mask>
	</defs>
	<g mask="url(#drop_mask)" class="vagueMask">
		<g class="vagueContainer vagueContainer-5" transform="translate(0, 224)">
			<path class="vague vague-5" fill="url(#water)" d="M0 0h1200v740H0z"></path>
		</g>
	</g>
</svg>

知道我该如何解决这个问题，还是应该设置静态回退？

PS：这是我第一次来这里，请告诉我是否应该包含其他元素！提前谢谢。

Answer 1

我更精确地查看了 <g> 元素，似乎找到了解决方法：我没有<g>作为掩码，而是引用了 <defs> 中的内容并将掩码应用于 <use> 标签。

$(document).ready(function(){
	var vagueContainer= SVG.get('vagueContainer');
	var vague= SVG.get('vague');
	vagueContainer.move(0, 470);
	var fromTop=444-niveau*44;
	vague.move(-600, 0);
	vagueContainer.animate('10s','>','1s').move(0, fromTop);
	vague.animate('1s','-','1s').move(0, 0).after(function(){
		vague.move(-600, 0);
		vague.animate('1.5s').move(0, 0).after(function(){
			vague.move(-600, 0);
			vague.animate('2s').move(0, 0).after(function(){
				vague.move(-600, 0);
				vague.animate('2.5s').move(0, 0).after(function(){
					vague.move(-600, 0);
					vague.animate('3s').move(0, 0).after(function(){
						vague.move(-600, 0);
						vague.animate('3.5s').move(0, 0).loop();
					});
				});
			});
		});
	});
});

#vagueMask{
  visibility: hidden;
  -moz-animation: show 1s 1 forwards;
  -webkit-animation: show 1s 1 forwards;
  animation: show 1s 1 forwards;
}
@keyframes show{
  100% {
    visibility:visible;
  }
}

<defs>
    <g id="vagueContainer" x="0" y="0" transform ="matrix(1,0,0,1,0,<?php echo $transform; ?>)">
		<rect id="vague" x="-600" y="0" fill="url(#water)" width="1200" height="740"/>
	</g>
</defs>
<use  mask="url(#drop_mask)" class="vagueMask" xlink:href="#vagueContainer" x="0" y="0" width="329" height="439"></use>

出于位置原因，我也让这个元素出现(如果没有.js元素已经放置在正确的水平，否则会下降以进行填充动画(：我不得不使用"可见性"，因为"不透明度"导致了同样的错误。

动画在火狐上工作正常

似乎有效，但我仍然不确定为什么...