css - 在 Firefox 中不遵守 SVG 的百分比转换原点，仅在 WebKit 中有时

Question

我有这个冰淇淋蛋筒 SVG 图形，我想用一个（中心底部）转换transform-origin勺子50% 100%。Firefox 声称服从（即检查员指出正确的transform-origin），但实际上是在左上角附近进行转换。奇怪的是，WebKit 只有在设置了父元素时才会服从font-size:100%。

这些是非常相似的问题，但仅与 Firefox 有关：

1. 在 SVG 组上设置变换原点在 FireFox 中不起作用

2. 如何在 SVG 中设置变换原点

3. 转换原点在 Firefox 中不起作用

Answer 1

就在最近我遇到了同样的问题；这是我解决它的方法：

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