如何让svg沿path的一段运动

simba
  • 17

如何让一个圆球沿一段完整的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效果:
bbbbb.gif

回复
阅读 218
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏