使用JavaScript更新SVG animateMotion路径后元素未沿新路径运动的问题

SVG的<animateMotion>一旦启动，就会把初始的运动路径数据缓存起来，哪怕你后来改了路径的transform，动画也不会自动用上新的路径状态。而且你给<mpath>加transform根本没用，这个元素不支持这个属性。

修改完路径的transform之后，必须重启<animateMotion>动画，让它重新读取更新后的路径。代码改法如下：

function changepath(selectObject) {
  let value = selectObject.value;
  let path = document.getElementById("planePath");
  // 拿到动画元素
  let animateMotion = document.querySelector('animateMotion');
  
  // 给旋转加个原点，不然默认以(0,0)转，路径容易跑出视口，这里用SVG视口中心当示例
  let rotation = `rotate(${value} 1000 100)`;
  path.setAttribute("transform", rotation);
  
  // 先暂停再重启，让动画重新加载路径
  animateMotion.pause();
  animateMotion.beginElement();
}

• 旋转的时候一定要加原点参数rotate(角度 中心x 中心y)，不然默认从左上角转，路径很可能移出SVG的可视范围，你就看不到动画了。
• 如果是要切换完全不同的路径，直接改<path>的d属性就行，改完同样要重启动画。

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