css - 在 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 只是按预期方式工作并不可取，但在浏览器更新之前，这对我来说是一个合适的选择。