问题
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%;
回答1:
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
回答2:
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.
来源：https://stackoverflow.com/questions/40896007/svg-transform-origin-problems-in-firefox