如何在< mpath>上反转SVG动画的移动方向？ [英] How to reverse the moving direction of the SVG animation on the <mpath>?

问题描述

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 属性来告诉动画向后运行。

The simplest way is to use the keyTimes and keyPoints attributes to tell the animation to run backwards.

keyPoints="1;0" keyTimes="0;1"

在这里，我们告诉动画在时间0处的路径（结束）处的位置 1，在动画结束处的位置0（开始处）。

Here we are telling the animation to be at position "1" on the path (the end) at time 0, and position 0 (the start) at the end of the animation.

演示：

<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>

这篇关于如何在< mpath>上反转SVG动画的移动方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！