如何同步SVG animateMotion与CSS动画 实现路径随矩形移动消失

代码无法同步的根本原因有两个：

• CSS中硬编码的stroke-dasharray: 1000和目标路径的实际长度不匹配。描边动画的进度是基于设置的dash长度计算的，一旦和实际路径长度存在偏差，描边消失的速度就会和正方形的运动速度不一致，自然无法对齐。
• 之前的动画逻辑虽然方向碰巧匹配，但因为长度错配，进度始终存在固定偏移。

1. 调用Path元素原生的getTotalLength()方法获取路径的精确总长度，替换硬编码的1000值，让描边动画的进度和路径实际长度严格绑定。
2. 调整描边动画的关键帧逻辑：让stroke-dashoffset从0（全路径可见）线性增长到路径总长度（全路径消失），变化周期和animateMotion的时长完全一致，都是5s线性缓动。
3. 保证两个动画同时启动，不设置任何延迟。

JS逻辑层 #

class Svg extends React.Component {
  componentDidMount() {
    const motionPath = document.getElementById('motionPath');
    // 获取路径实际总长度
    const pathLength = motionPath.getTotalLength();
    // 将长度值存入CSS自定义属性供动画使用
    motionPath.style.setProperty('--path-length', pathLength);
    // 初始化描边状态：dash长度等于路径总长，offset为0即全路径可见
    motionPath.style.strokeDasharray = pathLength;
    motionPath.style.strokeDashoffset = 0;
  }

  render() {
    return (
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
          <path
            className="path"
            id="motionPath"
            d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"
            stroke="#000"
            strokeWidth="4"
            strokeMiterlimit="10"
            fill="none"
          />
          <rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50" />
          <animateMotion
            id="forward"
            xlinkHref="#circle"
            dur="5s"
            fill="freeze"
            keyPoints="1;0"
            keyTimes="0;1"
            calcMode="linear"
          >
            <mpath xlinkHref="#motionPath" />
          </animateMotion>
        </svg>
      </div>
    );
  }
}

ReactDOM.render(
  <Svg />,
  document.getElementById("react")
);

CSS样式层 #

.path {
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    /* 偏移量等于路径总长时，路径完全不可见 */
    stroke-dashoffset: var(--path-length);
  }
}

• t=0：正方形位于路径终点，全路径可见
• 动画运行中：正方形始终处于可见路径段的最前端，身后的路径随移动逐步擦除
• t=5s：正方形到达路径起点，路径完全消失，两个动画进度完全对齐

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