Javascript SVG设置路径动画以围绕其中心旋转

我想为html登录页上使用的图像设置动画。该图像看起来包含28个心形齿轮。我想让每个齿轮围绕其中心连续旋转，顺时针或逆时针

我读过其他一些SO帖子，这些帖子涉及类似的问题，但解决方案对我来说并不适用。当我在齿轮的形状中添加一个

animateTransform

，指定其中心坐标时，它会围绕其中心旋转一个大圆圈，而不是保持在原位。我很困惑

我有从EPS到SVG的原始作品（由创建），这导致了相当大的路径。这就是结果

首先，我计划将其用于动画，但内联SVG动画标记也可以实现这一目的（可能更好）

在阅读其他SO提交的资料时，我尝试通过从以下坐标计算齿轮1的中心来旋转齿轮1：

• X:

  42.623

• Y:

  309.810

• 宽度：

  60.796

• 高度：

  60.774

导致以下转换：

对于坐标（计算）
这篇文章可能很有趣-介绍了一种计算路径元素旋转中心的方法：。谢谢@Conan。这是一篇好文章，但基本上是我现在正在做的。我认为
画布上的转换是个问题，因为它反转了Y访问并缩放。如果我把坐标减去一半高度，而不是加起来，那么半径就会小得多。也许现在还需要考虑一下规模。我看了一下
matrix
的工作原理，但是我的matrix数学太陈旧了，现在无法修复它。没想到简单的围绕中心旋转会有这么大的努力。@Conan I站着纠正。使用
getBBox（）
确实有效！不需要计算28个坐标，只需要一些JS。又来了！使用vector应用程序简单地将转换烘焙到路径数据中可能更好，这可以通过取消画布分组来完成。在几秒钟内完成，结果如下：