svg transform-origin problems in firefox

Question

excuse my terrible English. I'm having a problem when I want to animate an SVG in firefox. The problem comes from the "transform-origin" example of my code: http://codepen.io/anon/pen/JbOamB The problem is that in firefox, the animation is out of hand

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

Percentage values in transform-origin currently work in Firefox "as expected" only when svg.transform-box.enabled preference in about:config is tet to true and the element has

transform-box:fill-box.

Relevant bug is Bug 1209061 - transform-origin not applied correctly on svg content.

Answer 2

Firefox is behaving correctly as per the spec. Chrome implemented transform-origin early before the spec finalised. It handles percentage values differently to what the final spec specified. AFAIK they have not fixed that yet.

If you want your animation to be compatible with all browsers, don't use percentage values in transform-origin.

transform-origin: 3246px 6271px;

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