Question

我正试图用svg第一次为血滴填充动画：

动画在大多数导航器上运行良好（IE11上的静态回退不支持SVG动画），但Firefox在掩码上显示一些不良故障。使用Windows上最新版本的Firefox可以看到该错误，但Mac版本没有任何问题。

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

“wave”是一个带有填充图案和水平重复动画的矩形，在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>

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

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

Answer 1

我对<g>元素进行了更精确的检查，似乎找到了一种解决方法：而不是<g>作为掩码，我引用了<defs>中的内容并应用了屏蔽<use>标记。

＆＃13;

$(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();
					});
				});
			});
		});
	});
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

我也因为位置原因而出现这个元素（如果没有.js，元素已经放置在正确的级别，但是否则为了填充动画而下降）：我必须使用＆＃34; visibility＆＃ 34;，因为＆＃34;不透明度＆＃34;造成同样的错误。

Animation working fine on Firefox

似乎工作但我还不确定为什么......

SVG动画在firefox中的掩码故障中

1 个答案: