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