SVG动画不工作在Firefox

var tl = new TimelineLite; 
tl.staggerFromTo(".bottom", 0.8, {alpha: 0}, {alpha: 1, fill: "#d6d6d6", delay: 1}, 0.25) 
tl.fromTo("#rectangle", 5, {fill:"#d6d6d6", alpha: "0%", height: "7%"}, {fill: "#c8db2d", alpha: "100%", height: "65%", ease: Power3.easeInOut}, "-=1") 
tl.staggerFromTo(".ray", 1, {alpha: 0}, {alpha: 1, fill: "#cee325"}, 0.02, "-=1.25")

在网站

，但它似乎并没有与火狐浏览器完全兼容（在Chrome它完美），有什么办法可以让它适用于所有浏览器？

我试图改变对动画库的javascript调用，使用from而不是fromTo等，一切工作正常在Chrome浏览器，但不是在Firefox。（或者如果有人知道其他类似的动画我可以使用它也会很好：D）。非常感谢！

来源

2016-06-13 Orion390

如果我不得不猜测，我会说这是你使用的动画库的问题。

在动画中，它试图对<rect>元素的高度进行动画处理，以提供上升的填充效果。请注意以下代码中高度7％ - > 66％的转换。

.fromTo("#rectangle", 7, {fill:"#000", alpha: "0%", height: "7%"}, {fill: "#f5e317", alpha: "100%", height: "66%", ease: Power3.easeInOut}, "-=1")

动画运行时，矩形的高度实际上并未改变。所以我怀疑它可能是动画库在动画过程中设置高度的错误或不兼容性。

砍倒演示：http://codepen.io/anon/pen/Vjadwm

如果你没有答案在这里，我会考虑请使用GreenSock寻求帮助，或张贴与他们的bug报告。

来源

2016-06-14 02:52:57

rect height不是SVG 1.1中的CSS属性，它是一个属性（在这种情况下，Firefox仅支持SVG 1.1）rect height被认为是SVG 2中的CSS属性（在这种情况下Chrome支持SVG 2）。 SVG 2尚未完成，Firefox可能会及时支持该功能，因为它还支持Chrome尚未支持的其他SVG 2功能。 GSAPI应该足够聪明以真正隐藏这个问题。 –

@Robert，我没有使用Greensock，所以不想在我的答案中假设它只是动画的CSS属性。但我可能应该包含这些信息。 –

我认为它在某些情况下具有动画属性。据推测，这只是在这个特定的API的一些疏忽，正如OP从动画作品中说的那样。 –

SVG动画不工作在Firefox

回答

相关问题