Как изменить направление движения анимации SVG на «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>

svg animation smil
person Keli    schedule 06.09.2015    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Самый простой способ — использовать атрибуты 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>

person Paul LeBeau    schedule 06.09.2015
comment
Большое спасибо за подробное объяснение, Павел! - person Keli; 10.09.2015
comment
Кажется, что атрибут calcMode=linear должен быть явно установлен для элемента в Chrome. - person Roman; 04.09.2017
comment
Эй, @Paul LeBeau, нужна твоя помощь, возможно ли сделать то же самое в одном пути, например - person jay khatri; 23.04.2018