Firefox中的svg变换原点问题

Posted 2023-03-06

【中文标题】Firefox中的svg变换原点问题

【英文标题】：svg transform-origin problems in firefox

【发布时间】：2017-04-15 05:27:24

【问题描述】：

请原谅我糟糕的英语。当我想在 Firefox 中为 SVG 设置动画时遇到问题。问题来自“transform-origin” 我的代码示例： 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中，动画一发不可收拾

【参考方案1】：

Firefox 的行为符合规范。 Chrome 在规范最终确定之前就实施了transform-origin。它处理百分比值的方式与最终规范指定的不同。 AFAIK 他们还没有解决这个问题。

如果您希望您的动画与所有浏览器兼容，请不要在transform-origin 中使用百分比值。

transform-origin: 3246px 6271px;

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

【讨论】：

请注意，此问题也会影响transform-origin: center，因为“center”被定义为 b 相当于“50%”。

【参考方案2】：

仅当about:config 中的svg.transform-box.enabled 偏好设置为true 并且元素具有时，transform-origin 中的百分比值当前在 Firefox 中“按预期”工作

transform-box:fill-box.

相关的错误是Bug 1209061 - transform-origin not applied correctly on svg content。