我有这个冰淇淋锥SVG图形，我想转换勺具有50％100％(中心底部)的转换原点。 Firefox声称服从(即，检查员注意到正确的变换起源)，但实际上变换左上角。 WebKit，奇怪的是，只有当父元素具有font-size：100％set时才会遵守。
这些是非常类似的问题，但只适用于Firefox：
> Setting transform-origin on SVG group not working in FireFox
> How to set transform origin in SVG
> Transform Origin not working in Firefox
解决方法
最近我遇到了同样的问题;这里是我去解决它：
根据this page on SVG animation with CSS transforms，主要的浏览器根本不一致将变换原点应用到SVG元素。页面的作者创建了一个名为GSAP的JavaScript动画平台，并在文章中解释了它的一些变换起源计算。虽然你非常欢迎用JavaScript实现数学来修复SVG起源，我看了一下GSAP(特别是TweenLite工具)，它最终完全满足了我的需求。如果你确定在你的网站使用外部库，我建议使用他的工具来执行SVG元素的动画，因为它允许你在所有主要浏览器的动画元素一致。显然不是最好的转换起源只是工作，就像它的应该，但直到浏览器更新，这已经是我的一个合适的替代品。
