在Firefox中svg變換原點問題

Question

請原諒我可怕的英語。當我想在Firefox中爲SVG製作動畫時，我遇到了問題。這個問題來自於「變換出身」我的代碼 例如： http://codepen.io/anon/pen/JbOamB 的問題是，在Firefox中，動畫是一發不可收拾了

EJ：

-moz-transform-origin:30% 20%; 
-ms-transform-origin:30% 20%; 
-o-transform-origin: 30% 20%; 
-webkit-transform-origin: 30% 20%; 
transform-origin: 30% 20%; 

Answer 1

Firefox是正確表現爲根據規格。 Chrome在規範定稿前早早實施transform-origin。它處理的百分比值與最終規範指定的不同。 AFAIK他們還沒有解決這個問題。

如果您希望動畫與所有瀏覽器兼容，請不要在transform-origin中使用百分比值。

transform-origin: 3246px 6271px; 

http://codepen.io/anon/pen/MbrWod

Answer 2

在transform-origin百分比值目前適用於Firefox， 「預期」，只有當svg.transform-box.enabled偏好about:config是TET到true和元素具有

transform-box:fill-box。

相關錯誤是Bug 1209061 - transform-origin not applied correctly on svg content。