触发事件时动态修改SVG animateMotion元素路径并重播动画

• SVG属性无法通过直接给DOM对象赋值的方式修改，你当前用dot.path = xxx的写法不会实际更新DOM节点上的属性，必须使用setAttribute()方法修改path的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SVG Example</title>
    <style>
        * { padding: 0; margin: 0; }
        svg { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
<script>
  window.addEventListener("click", function(e){
    var dot = document.getElementById("reddot");
    // 用setAttribute修改path属性
    dot.setAttribute('path', 'M 0 0 H ' + e.clientX + ' V ' + e.clientY);
    dot.beginElement();
  });
</script>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <circle cx="0" cy="0" r="2" fill="red">
    <animateMotion dur="5s" id="reddot" repeatCount="1" path="M 0 0 H 10 V 10" restart="always" />
  </circle>
</svg>
</body>
</html>

• 上面的代码默认svg占满整个视口，点击坐标可直接匹配svg的viewBox尺寸。如果你的svg有固定宽高、不是全屏展示，需要先将点击的clientX/clientY转换为svg内部坐标系的坐标，避免动画终点和点击位置出现偏移。

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