在svg中移动'Path‘元素

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  <circle cx="10" cy="80" r="5" fill="red">
    <animateMotion dur="5s" repeatCount="indefinite">
      <mpath href="#myPath"/>
    </animateMotion>
  </circle>
</svg>

<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  <circle id="myCircle" cx="10" cy="80" r="5" fill="red"/>
</svg>

<script>
  var path = document.getElementById('myPath');
  var circle = document.getElementById('myCircle');
  var length = path.getTotalLength();

  function moveAlongPath() {
    requestAnimationFrame(moveAlongPath);
    var distance = (performance.now() / 1000) % length;
    var point = path.getPointAtLength(distance);
    circle.setAttribute('cx', point.x);
    circle.setAttribute('cy', point.y);
  }

  moveAlongPath();
</script>