在Chrome而非FF上运行的SVG上CSS动画的transform-origin

在Chrome而非FF上运行的SVG上CSS动画的transform-origin

我有一个工作的例子：

这个答案的问题是

x=""

和

y=""

属性不适用于所有svg元素，在您的情况下，它们对text元素有效，但对path无效。

我的答案涉及CSS

transform: translate()

。当您尝试在同一元素上运行动画时，这些值（以及inline

path

属性

transform="translate()"

）将重置，因为动画也是transform-

transform:rotate()

。我试图将平移链接到旋转上，但这在FF中也无法正常工作。

我把路径包装成两个

g

。路径和外部组用于偏移/重置对齐，中间一组用于动画。