如何让svg沿path的一段运动

Question

如何让一个圆球沿一段完整的path的一段运动？

下面目前的一个实现
源码：

<svg width="220" height="120"
 viewPort="0 0 220 120" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <path id="line" stroke-width="1" style="stroke: #000000; fill: none;" d="M10,40 q60,-50 100,0"></path>
  <circle cx="0" cy="0" r="2" fill="red">
    <animateMotion
 dur="1s"
 fill="freeze"
 repeatCount="indefinite"
 >
      <mpath xlink:href="#line"></mpath>
    </animateMotion>
  </circle>
</svg>

gif效果：