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

Question

我有这样的蛋卷冰淇淋SVG图形,我想用一个改造瓢transform-origin的50% 100%(底部中心).Firefox声称服从(即检查员注意到正确transform-origin),但实际上是左上角的变换.奇怪的是,WebKit只有在父元素font-size:100%设置时才会服从.

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

1. 在SVG组上设置transform-origin不在FireFox中工作

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

3. Transform Origin无法在Firefox中运行

Answer 1

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

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