在Firefox中不遵守SVG的百分比變換原點，有時僅在WebKit中使用

我有這個冰淇淋錐SVG圖形，我想用transform-origin的（中心底部）變換勺子。 Firefox聲稱服從（即檢查員注意到正確的transform-origin），但實際上轉換爲左上角。奇怪的是，WebKit只會在父元素設置爲font-size:100%時才服從。在Firefox中不遵守SVG的百分比變換原點，有時僅在WebKit中使用

這些都是非常類似的問題，但只涉及到Firefox：

來源

2013-07-08 Toph

您在其他問題中提到的作爲註釋的錯誤與transform-origin沒有任何關係。如果我是你，我會在你的測試用例附上bugzilla中引發一個新bug。 –

是的，我意識到事後，我的不好...我會這樣做。 – Toph

@Toph我在bugzilla中找到了你的bug報告。你可能想投票得到[bug＃923193]（https://bugzilla.mozilla.org/show_bug.cgi?id=923193）解決。截至撰寫時，它只有4票。 – dotnetCarpenter

就在最近，我來了跨越同一個問題;以下是我如何解決它：

根據this page on SVG animation with CSS transforms，主要的瀏覽器在將transform-origin應用於SVG元素時根本不一致。該頁面的作者創建了一個名爲GSAP的JavaScript動畫平臺，並在文章中解釋了一些transform-origin計算。儘管您非常歡迎使用JavaScript來自己實現數學來修復SVG的起源，但我看了一下GSAP（特別是TweenLite工具），它最終完美地滿足了我的需求。如果您可以在網站中使用外部庫，我會建議使用他的工具在SVG元素上執行動畫，因爲它允許您在所有主流瀏覽器中一致地動畫元素。對於transform-origin來說，它顯然不是最好的選擇，但在瀏覽器更新之前，這對我來說是個合適的選擇。

來源

2015-05-23 19:35:44 jming

在Firefox中不遵守SVG的百分比變換原點，有時僅在WebKit中使用

回答

相關問題