在Firefox中没有遵守SVG的转换起源百分比，有时只在WebKit中使用

Question

我有这个冰淇淋锥SVG图形，我想用transform-origin 50% 100%（中间底部）改变勺子。 Firefox声称服从（即检查员注意到正确的transform-origin），但实际上是左上角的变换。奇怪的是，WebKit只有在父元素设置为font-size:100%时才会服从。

这些是非常相似的问题，但仅适用于Firefox：

1. Setting transform-origin on SVG group not working in FireFox

2. How to set transform origin in SVG

3. Transform Origin not working in Firefox

Answer 1

就在最近，我遇到了同样的问题;这是我如何解决它：

根据this page on SVG animation with CSS transforms，主要浏览器在将transform-origin应用于SVG元素时并不一致。该页面的作者创建了一个名为GSAP的JavaScript动画平台，并在文章中解释了它的一些transform-origin计算。虽然您非常欢迎使用JavaScript自行实现数学来修复SVG的起源，但我看了一下GSAP（特别是TweenLite工具），它最终完全满足了我的需求。如果您在网站中使用外部库，我会建议使用他的工具在SVG元素上执行动画，因为它允许您在所有主流浏览器中一致地设置元素的动画。它显然不像transform-origin那样只是像它应该的那样工作，但在浏览器更新之前，这对我来说是一个合适的选择。