如何让SVG的rect沿path路径运动，消除平移偏移且适配多路径场景？

问题原因 #

animateMotion 计算位移时会叠加其所属元素自身及所有上级节点的 transform 属性，你之前将初始平移和 animateMotion 放在同一个 <g> 标签下，导致初始偏移量被始终带入路径动画的位移计算，才会出现位置偏差。

解决方案 #

拆分DOM层级，将元素自身定位和路径动画拆开处理：

• 外层分组绑定 animateMotion，仅负责沿路径运动，不要加任何额外transform
• 内层分组写你需要的初始平移，用来调整元素相对于路径锚点的位置，比如让矩形的某个位置（中心/左上角）对齐路径上的点

单路径场景修复代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px"
    height="400px">
    <defs />
    <path id="path" d="M 100 100 L 100 15 L 500 15 L 500 150" fill="none" stroke="#000000" stroke-width="3"
      stroke-miterlimit="10" pointer-events="none" />
    <!-- 外层分组只加动画，不做平移 -->
    <g>
      <!-- 内层分组放初始平移，调整元素相对于路径的位置 -->
      <g transform="translate(50,75)">
        <rect height="50" width="100" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
        </rect>
        <text x="15" y="28">Click me !</text>
      </g>
      <animateMotion id="move" dur="4.6s" begin="click">
        <mpath xlink:href="#path" />
      </animateMotion>
    </g>
</svg>

多路径适配方案 #

如果需要适配不同路径，最通用的做法是将运动元素的自身坐标原点对齐到你需要贴合路径的点位，比如要让矩形中心始终贴合路径，就把rect的x设为-宽度/2，y设为-高度/2，不需要额外的初始平移，不管路径的起点坐标是什么，元素都会以中心对齐路径运动，完全适配多路径场景，对应修复代码如下：

<svg viewBox="-100 -130 700 400">
  <defs />
  <path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
    stroke-miterlimit="10" pointer-events="none" />

  <path id="path2" d="M 150 0 L 150 90 L -50 90 L -50 150" fill="none" stroke="#ff0000" stroke-width="3"
    stroke-miterlimit="10" pointer-events="none" />
  <g>
    <!-- rect的原点在自身中心，会直接对齐路径上的点 -->
    <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
    <text text-anchor="middle" dominant-baseline="middle">Click me !</text>
    <animateMotion id="move" dur="4.6s" begin="click">
      <mpath xlink:href="#path" />
    </animateMotion>
  </g>

  <g transform="translate(150,0)">
    <rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
    <text text-anchor="middle" dominant-baseline="middle">Click me !</text>
    <animateMotion id="move2" dur="4.6s" begin="click">
      <mpath xlink:href="#path2" />
    </animateMotion>
  </g>
</svg>

所有运动元素的内部代码可以完全统一，换路径只要改外层的初始平移和mpath的href即可，维护成本极低。

内容的提问来源于stack exchange，提问作者René Link