svg-path圆点沿路径跟随动画

这里探究svg动画animateMotion使用，实现一个svg-path圆点沿路径跟随效果。
下面是svg文件代码：

<svg viewBox="0 0 120 120" fill="#3d1" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path id="motionPath" d="M 40 30 Q 10,9 20,100 L 100 80 L60 40" stroke="red" stroke-dasharray="4 4" fill="none" stroke-width="1"></path>
  <circle id="circle" cx="0" cy="0" r="2" />
  <animateMotion
         id="circle"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#circle"
         dur="10s"
         begin="0s"
         fill="freeze"
         repeatCount="1"> 
       <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath" />  
   </animateMotion>
</svg>

这里，animateMotion属性repeatCount意思是动画运行次数，值为“indefinite”时，无限次运行动画。
效果：
在这里插入图片描述