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

回答

相關問題