我使用svg动画标签沿着路径标记的坐标为组标签设置动画。不幸的是,动画的运行方向与我的要求相反(I.E从b变为a而不是a到b)。是否存在任何可以修改此属性的属性,例如:
<animateMotion
xlink:href="#group1"
dur="6s"
fill="freeze"
rotate="auto-reverse"
direction="reverse"
>
<mpath xlink:href="#path1" />
</animateMotion>
我知道这可以用snap或raphael来实现,但据我所知,它不可能使用任何东西来实现&#39; rotate =&#34; auto-reverse&#34;& #39;在那些图书馆里。
或者,有没有办法扭转我的路径计算方式;这可以用任何软件实现吗?
答案 0 :(得分:3)
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<!-- Here is a green circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="green">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" keyPoints="0;1" calcMode="linear"
keyTimes="0;1">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
<!-- Here is a red one, using the same motionPath but reversed thanks to keyPoints -->
<circle cx="" cy="" r="5" fill="red">
<animateMotion dur="6s" repeatCount="indefinite" keyPoints="1;0" calcMode="linear"
keyTimes="0;1">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>
&#13;