Firefox中掩码故障中的SVG动画答案

【问题标题】：SVG Animation within mask glitch in firefoxFirefox中掩码故障中的SVG动画
【发布时间】：2018-06-12 05:56:40
【问题描述】：

我第一次尝试用 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>

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

附： : 这是我第一次来这里，请告诉我是否应该添加其他元素！提前致谢。

【问题讨论】：

您能否确认即使没有动画也会发生故障？否则，请包含动画代码。顺便说一句，Linux 上的 Firefox 似乎也可以正确呈现。）
只有在嵌套动画时才会出现故障，但内部动画似乎没有问题。我的动画代码很简单：.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); } }
您提供的代码不完整。我从你的网站上补充了它，因为这是你第一次尝试询问。请不要指望将来会有这样的帮助，并提供minimal reproducible example。
我的错，我正在学习。下次我会更加小心。我已经尝试使用 jquery 来制作动画，并让动画在 IE 中工作，但故障仍然存在......我认为这与这两个嵌套的有关，但是什么......
@Feuf 在bugzilla中提出一个错误

标签： animation firefox svg mask display

【解决方案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，则元素已经放置在正确的级别，否则会下降以填充动画）：我必须使用“可见性”，因为“ opacity”导致了同样的错误。

Animation working fine on Firefox

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

【讨论】：