Использование animateMotion вместе с keyTimes/keyPoints

Question

Я пытаюсь использовать нелинейную скорость анимации на SVG <animateMotion> с использованием атрибутов keyTimes="…" и keyPoints="…". Он, похоже, не работает: движение анимации является таким же линейным, как может быть.

Вот тестовый файл ^{try it!}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" 
    viewBox="0 0 300 200"> 
    <style> 
    path { stroke:#999 } 
    circle { fill-opacity:0.5; stroke:black } 
    </style> 
    <path id="p" d="M30,160 L270,40" /> 
    <circle id="c" r="5" /> 
    <animateMotion x:href="#c" fill="freeze" 
    dur="10s" 
    keyTimes="0;0.1;1" 
    keyPoints="0;0.9;1"> 
    <mpath x:href="#p" /> 
    </animateMotion> 
</svg> 

При работе мяч должен двигаться на 90% по пути в первую секунду, и переместить конечную 10% в оставшиеся 9 секунд. Что мне нужно изменить, чтобы заставить это работать?

Я нашел another example online, который работает правильно, так что я знаю, что это не моя ОС/браузер/версия по вине.

_{(FWIW: Win7x64, Chrome30)}

Answer 1

Я нашел ошибку. Несмотря на то, что значение по умолчанию для calcMode равно linear, что я и хочу - я недостаточно читал в спецификации, чтобы увидеть, что это разные значения для <animateMotion> элементов.

Исправление ошибки calcMode="linear" устраняет проблему.

Answer 2

По умолчанию calcmode Значение для движения в движении составляет paced не linear;

http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement

И, если calcmode = "прошелся" указано, будут игнорироваться любые «keyTimes» или «keySplines».

http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute;

Вот почему у вас нет нужного выхода ...