Using animateMotion along with keyTimes/keyPoints

Question

I am trying to use non-linear animation rate on an SVG <animateMotion> by using the keyTimes="…" and keyPoints="…" attributes. It does not appear to be working: the animation motion is as linear as can be.

Here's the test file ^{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>

When working the ball should move 90% along the path in the first second, and move the final 10% in the remaining 9 seconds. What do I need to change to get this to work?

I've found another example online that is working correctly, so that I know it's not my OS/browser/version at fault.

_{(FWIW: Win7x64, Chrome30)}

Answer 1

I found my mistake. Even though the default value for calcMode is linear—which is what I want—I didn't read far enough into the spec to see that it's a different default value for <animateMotion> elements.

Adding an explicit calcMode="linear" fixes the problem.

Answer 2

The default calcmode Value for animate Motion is paced not linear;

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

And, if calcmode = "paced" is specified, any ‘keyTimes’ or ‘keySplines’ will be ignored.

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

That is why you have not got the the desired output...