求助：SVG齿轮绕自身中心持续旋转动画实现（人道技术中心落地页）

嘿，Arnold！听起来你在为人道技术中心制作的SVG心形齿轮动画里遇到了旋转跑偏的麻烦——这种情况我帮不少开发者排查过，核心问题大多和SVG的坐标系统、旋转原点的设置有关，咱们一步步来搞定它：

1. 先确认齿轮的真实中心坐标 #

很多时候我们凭直觉设定的中心其实不对，尤其是用<path>或者复杂图形绘制的齿轮。你可以用浏览器开发者工具的SVG检查器查看每个齿轮的边界框（Bounding Box），中心坐标就是 (x + width/2, y + height/2)。比如齿轮的边界框是x: 20, y: 30, width: 50, height:50，那中心就是(45, 55)。

如果需要批量计算，也可以用JS快速获取：

const gear = document.querySelector('.your-gear-class');
const bbox = gear.getBBox();
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
console.log(`齿轮中心：(${centerX}, ${centerY})`);

2. 正确配置animateTransform参数 #

别踩旋转参数的格式坑！type="rotate"的正确参数格式是 rotate(角度, 中心X, 中心Y)，动画的from和to要严格对应这个格式，同时加上必要的动画属性：

• attributeName="transform"：指定要动画的属性
• dur：动画时长（比如3s）
• repeatCount="indefinite"：无限循环
• 方向控制：顺时针用to="360 中心X 中心Y"，逆时针用to="-360 中心X 中心Y"

示例代码：

<g class="gear">
  <!-- 你的齿轮图形（path/circle等） -->
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 45 55"
    to="360 45 55"
    dur="3s"
    repeatCount="indefinite"
    fill="freeze"
  />
</g>

3. 用嵌套<g>规避坐标系混淆 #

如果你的整个心形齿轮组有全局的transform（比如平移、缩放），直接用全局坐标会导致旋转中心偏移。最可靠的办法是：

1. 把单个齿轮的图形调整到自身中心对齐到(0,0)（可以用translate把齿轮移到原点）
2. 把这个齿轮放到父<g>里，用父<g>的transform把齿轮定位到心形的对应位置
3. 此时齿轮的旋转中心直接用(0,0)即可，完全不受全局坐标系影响

示例：

<!-- 父g负责定位到心形的某个点 -->
<g transform="translate(120, 80)">
  <!-- 子g里的齿轮中心在(0,0) -->
  <g class="gear">
    <path d="M0,-25 L5,-20 ..." /> <!-- 齿轮路径，中心在原点 -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 0 0"
      to="360 0 0"
      dur="3s"
      repeatCount="indefinite"
    />
  </g>
</g>

这种方法批量处理28个齿轮时特别省心，每个齿轮的动画配置完全一致，只需要调整父<g>的translate坐标即可。

4. 备选方案：用CSS动画更直观 #

如果你的SVG是嵌入HTML页面使用的，用CSS动画可能比纯SVG动画更易维护：

.gear {
  transform-origin: center center; /* 自动以自身中心为旋转原点 */
  animation: spin-clockwise 3s linear infinite;
}

.gear.reverse {
  animation: spin-counter 3s linear infinite;
}

@keyframes spin-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

给需要逆时针转的齿轮加个.reverse类就行，不用逐个写animateTransform，效率更高。

内容的提问来源于stack exchange，提问作者Arnold Schrijver