Firefox 中不遵循 SVG 的百分比变换来源，仅有时在 WebKit 中遵循

我有这个蛋卷冰淇淋 SVG 图形，我想用一个transform-origin of 50% 100%（中心底部）。 Firefox 声称遵守（即检查员记录了正确的transform-origin）但实际上是围绕左上角进行变换。奇怪的是，WebKit 只会服从父元素的情况font-size:100% set.

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

1. 在 SVG 组上设置转换原点在 FireFox 中不起作用 https://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox

2. 如何在 SVG 中设置变换原点 https://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg?rq=1

3. 转换原点在 Firefox 中不起作用 https://stackoverflow.com/questions/14369560/transform-origin-not-working-in-firefox

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

根据本页介绍使用 CSS 变换的 SVG 动画 https://css-tricks.com/svg-animation-on-css-transforms/，主要浏览器在应用上根本不一致transform-originSVG 元素还没有。该页面的作者创建了一个名为的 JavaScript 动画平台GSAP http://greensock.com/gsap，并解释了其中的一些transform-origin文章中的计算。虽然非常欢迎您使用 JavaScript 自己实现数学来修复 SVG 起源，但我查看了 GSAP（特别是 TweenLite 工具），它最终完美地满足了我的需求。如果您可以在网站中使用外部库，我建议您使用他的工具在 SVG 元素上执行动画，因为它允许您在所有主要浏览器中一致地对元素进行动画处理。这显然不是更好的选择transform-origin只是像它应该的那样工作，但在浏览器更新之前，这对我来说是一个合适的选择。