SVG animateMotion All In One

The SVG <animateMotion> element provides a way to define how an element moves along a motion path.

demos

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- circle -->
  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- path -->
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  <!-- circle -->
  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

(

标签：animateMotion,cnblogs,SVG,xgqfrms,www,文章
From： https://www.cnblogs.com/xgqfrms/p/17117910.html