这里探究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”时,无限次运行动画。
效果:
在这里插入图片描述