SVG车轮动画异常求助：添加旋转动画后轮元素偏移

核心问题是SVG默认以坐标系原点(0,0)作为旋转中心，而非车轮自身的几何中心，直接添加rotate动画会让元素绕左上角旋转，自然出现偏移。以下是具体修复方案：

正确实现思路 #

把车轮元素包裹在<g>容器中，让容器负责左右移动，内部元素负责旋转和缩放——这样旋转中心可以固定在车轮自身中心，不会随移动偏移。

修正代码示例 #

<svg width="1000" height="500" viewBox="0 0 1000 500">
  <!-- 用g容器包裹车轮，初始定位到(100,250)，内部元素以自身中心(0,0)为原点 -->
  <g id="wheel-container">
    <circle cx="0" cy="0" r="50" fill="#888" stroke="#000" stroke-width="2"/>
    <line x1="-50" y1="0" x2="50" y2="0" stroke="#000" stroke-width="2"/>
    <line x1="0" y1="-50" x2="0" y2="50" stroke="#000" stroke-width="2"/>
  </g>

  <!-- 容器的左右移动动画 -->
  <animate
    href="#wheel-container"
    attributeName="transform"
    from="translate(100, 250)"
    to="translate(900, 250)"
    dur="5s"
    repeatCount="indefinite"
  />

  <!-- 车轮的旋转动画：以自身中心(0,0)旋转 -->
  <animate
    href="#wheel-container"
    attributeName="transform"
    from="rotate(0 0 0)"
    to="rotate(360 0 0)"
    dur="1s"
    repeatCount="indefinite"
    additive="sum"
  />

  <!-- 可选的缩放动画：叠加在移动和旋转之上 -->
  <animate
    href="#wheel-container"
    attributeName="transform"
    from="scale(1)"
    to="scale(1.2)"
    dur="2s"
    repeatCount="indefinite"
    additive="sum"
    alternate="true"
  />
</svg>

关键细节说明 #

1. 容器化管理：用<g>包裹车轮，初始transform把车轮定位到目标位置，内部元素坐标以自身中心为(0,0)——旋转时指定(0,0)就是车轮中心，不会绕SVG左上角转。
2. 动画叠加：旋转和缩放动画必须加additive="sum"，这样它们会和移动动画叠加，而不是覆盖移动效果。
3. 旋转中心指定：rotate(角度 cx cy)里的cx cy是相对于容器内部的坐标，这里用(0,0)就对应车轮自身中心。

如果你之前直接给单个元素加动画，没有用容器，旋转中心会固定在SVG原点，哪怕加了translate(-500,-500)也只是偏移元素位置，没解决旋转中心的根本问题。

内容的提问来源于stack exchange，提问作者Чудо Юдо