Как изменить направление движения анимации SVG на <mpath>?

Question

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> 

Answer 1

Самый простой способ заключается в использовании keyTimes и keyPoints атрибуты сказать анимацию, чтобы двигаться в обратном направлении.

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

Здесь мы говорим анимацию, чтобы быть в положении «1» на пути (конец) в момент времени 0, и положение 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>