如何在<mpath>上反转SVG动画的移动方向？
http://codepen.io/KeliChiu/pen/gabNWM嗨，我试图扭转沿SMIL SVG动画中的路径的两个红点的移动方向。 对于我从文档中获得的所有属性，我无法找到适合此尝试的属性。 帮助表示赞赏！ 文档在这里：http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px"
height="320px" viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
<path class="stage1" id="stage1-1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M160,220.499c-11.284,0-20.432-9.147-20.432-20.432v-40.868"/>
<path class="stage1" id="stage1-2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M180.432,159.199v40.868c0,11.284-9.147,20.432-20.432,20.432"/>
<circle r="8" fill="red">
<animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto" >
<mpath xlink:href="#stage1-1"/>
</animateMotion>
</circle>
<circle r="8" fill="red">
<animateMotion dur=".6s" begin="s" fill="remove" rotate="auto">
<mpath xlink:href="#stage1-2"/>
</animateMotion>
</circle>
</svg>
最简单的方法是使用keyTimes和keyPoints属性来告诉动画向后运行。
keyPoints="1;0" keyTimes="0;1"
在这里，我们告诉动画在时间0的路径（末尾）上的位置“1”处，并且在动画结束处的位置0（开始处）。
演示：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="320px" height="320px" viewBox="0 0 320 320">
<path class="stage1" id="stage1-1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M160,220.499c-11.284,0-20.432-9.147-20.432-20.432v-40.868"/>
<path class="stage1" id="stage1-2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M180.432,159.199v40.868c0,11.284-9.147,20.432-20.432,20.432"/>
<circle r="8" fill="red">
<animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto"
keyPoints="1;0" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#stage1-1"/>
</animateMotion>
</circle>
<circle r="8" fill="red">
<animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto"
keyPoints="1;0" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#stage1-2"/>
</animateMotion>
</circle>
</svg>上一篇: How to reverse the moving direction of the SVG animation on the <mpath>?