如何在SVG的SMIL中让多个animateTransform动画点击后同时运行？

问题分析 #

你的代码存在几个导致动画不同步的问题：

• 轮子旋转动画的to参数格式错误，rotate类型的animateTransform需要按[角度] [旋转中心x] [旋转中心y]的格式设置
• 仅给一个轮子添加了动画，通过<use>引用的另一个轮子没有动画
• 动画触发条件不一致，且轮子动画的重复次数和时长匹配逻辑有误

修正后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 220">
<g id="car">
  <g style="fill:#C7CFE2">
    <rect width="57" height="18" x="7" y="181" transform="rotate(-129 -2 112)"/>
    <path d="M207 58c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
    <path d="m324 15-2-2h-39l61 69 36-17s-42-39-56-50Z"/>
  </g>
  
  <path style="fill:#FF6464" d="M415 56h-36c-5 0-11 2-15 4l-12 9-5 2-33-44c-2-2 0-6 3-6h14l-7-6c-7-6-20-12-50-12h-44c-19 0-38 4-55 13l-62 31H35C21 47 9 59 9 74v79l62 18h432v-27c0-49-39-88-88-88Zm-208 2c-6-1-9-8-6-13l6-11c5-8 14-13 23-13h44c8 0 16 4 21 10l31 42-119-15Z"/>
  
  <path style="fill:#D2555A" d="M503 180H106c-5 0-9-4-9-9s4-9 9-9h397c5 0 9 4 9 9s-4 9-9 9Z"/>
  

<g id="wheel">
  <circle style="fill:#000" cx="415" cy="160" r="44"/>
  
  <circle cx="415" cy="160" r="36" fill="transparent" stroke="#222" stroke-width="20" stroke-dasharray="6 6" />
  
  <circle cx="415" cy="160" r="38" fill="#000" />
  
  <circle style="fill:#B8BFD4" cx="415" cy="160" r="18"/>
  <!-- 右侧轮子的旋转动画 -->
  <animateTransform
    attributeName="transform"
    type="rotate"
    to="820 415 160"
    begin="click"
    dur="8s"
    fill="freeze"/>
  </g>
  
  
  <g style="fill:#D2555A">
    <path d="m79 180-2-1-70-17c-5-2-8-6-7-11s6-8 11-6l71 17c4 1 7 6 6 11-1 4-5 7-9 7Z"/>
    <path d="m9 100 12 13c4 3 5 7 5 12v37l-17-9v-53Z"/>
    
    <path d="M294 144H141c-5 0-9-4-9-9 0-4 4-8 9-8h153c7 0 14-3 19-8l13-14c4-3 9-3 13 0 3 4 3 9 0 13l-13 13c-9 9-20 13-32 13Z"/>
  </g>
  
<g id="left-wheel">
  <use href="#wheel" x="-315" y="0"/>
  <!-- 左侧轮子的旋转动画 -->
  <animateTransform
    attributeName="transform"
    type="rotate"
    to="820 100 160"
    begin="click"
    dur="8s"
    fill="freeze"/>
</g>
  
  <path style="fill:#FF8B8B" d="m15 57 339 33c5 1 10 0 14-2 20-10 90-34 135 46-5-44-43-78-88-78h-36c-5 0-11 2-15 4l-12 9-5 2s-3 4-21 2l-71-9-142-17H35c-8 0-15 4-20 10Z"/>
  <path style="fill:#FF6464" d="M44 29H22c-8 0-15-4-17-12l-3-7C1 6 3 3 7 3h37c5 0 9 4 9 9v9c0 5-4 8-9 8Z"/>
  
  <!-- 汽车移动动画 -->
  <animateTransform
    attributeName="transform"
    type="translate"
    to="630,0"
    begin="click"
    dur="8s"
    fill="freeze"/>

</g>
</svg>

关键修正点 #

• 统一触发条件：所有动画的begin都设置为click，确保点击后同时启动
• 修正旋转动画参数：
  1. 计算同步旋转角度：轮子半径44，周长≈276.46，汽车移动距离630，旋转角度= (630/276.46)*360≈820度，保证轮子转动和移动完全同步
  2. 每个轮子的旋转中心设置为自身圆心（右侧是415,160，左侧是100,160）
• 给两个轮子都加动画：左侧轮子单独包裹在<g>标签中，添加对应旋转动画，确保双轮同时转动
• 移除错误属性：删掉原代码中错误的href="wheel"和repeatCount="indefinite"，让动画时长和移动时长完全匹配，结束后保持状态

内容的提问来源于stack exchange，提问作者Резидент Казахстана