Firefox中的SVG转换来源问题 [英] svg transform-origin problems in firefox

问题描述

请原谅我可怕的英语。当我想要在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％; 
  

解决方案

Firefox按照规范运行正常。 Chrome在规范定稿前早早实现了 transform-origin 。它处理的百分比值与最终规范指定的不同。 AFAIK他们还没有解决这个问题。

如果你想让动画与所有浏览器兼容，不要在 transform-来源。

  transform-origin：3246px 6271px; 
  

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

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%; 

解决方案

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

这篇关于Firefox中的SVG转换来源问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！