SVG path morph easing

Question

i'd like to control the interpolation of a path animation in svg, but i can only get it working with linear interpolation. I've create this code pen as a simple example:

http://codepen.io/adamdaly/pen/yzhCm/

As you can see the black path is animating correctly using linear interpolation, but the red line that is set up for non-linear isn't animating. How should this work?

Adam

Answer 1

You have a couple of issues which cause the animation to be in error and so be ignored.

1. There must be exactly as many keyTimes entries as values.
2. There must be one fewer keySplines entry than keyTimes entries

You aren't following these rules and so the animation is in error. Here's one way to correct things...

<svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="100%" height="100%">
      <path d="M100 200 c0,-100 200,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
        <animate
                 dur="2"
                 repeatCount="indefinite"
                 attributeName="d"
                 from="M100 200 c0,-100 200,-100 200,0" 
                 to="M100 200 c0,-100 200,-100 200,0"
                 values="M100 200 c50,-100  250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100  250,-100 200,0">
          
        </animate>
      </path>
      <path d="M100 200 c0,-100 200,-100 200,0" stroke="#FF0000" stroke-width="4" fill="none">
        <animate
                 dur="2"
                 repeatCount="indefinite"
                 attributeName="d"
                 from="M100 200 c0,-100 200,-100 200,0" 
                 to="M100 200 c0,-100 200,-100 200,0"
                 values="M100 200 c50,-100  250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100  250,-100 200,0"
                 keyTimes="0; 0.5; 1"
                 keySplines="0.25 0 0.75 1; 0.25 0 0.75 1"
                 calcMode="spline">
          
        </animate>
      </path>
      
    </svg>