SVG issue : using values and calcmode

Question

I'm learning how to animate svg.

I can animate between two shapes with calcMode="spline", I can animate between three shapes without calcMode="spline", but I can't animate between three shapes with calcMode="spline".

Here's my example :

<animate
        attributeName="d"   
        attributeType="XML"     
        begin="0"               
        from="M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
        C662.2,170.5,662.1,170.5,662.1,170.5z"

        to="M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
        C704.4,146.4,704.2,146.5,704,146.5z"
        dur="2s"
        values="
        M662.1,170.5c-0.2,0-0.3-0.1-0.4-0.3l-3.5-7.9c-0.1-0.2,1-0.1,1-0.1l3.2,7.7c0.1,0.2,0,0.5-0.2,0.6
        C662.2,170.5,662.1,170.5,662.1,170.5z;
        M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-16.4-25.1c-0.3-0.7,3.6-0.5,3.6-0.5l15.6,24.4
        c0.3,0.8,0,1.6-0.8,2C704.4,146.4,704.2,146.5,704,146.5z;
        M704,146.5c-0.6,0-1.1-0.3-1.4-0.9l-12.4-28.1c-0.3-0.7,3.6-0.5,3.6-0.5l11.6,27.4c0.3,0.8,0,1.6-0.8,2
        C704.4,146.4,704.2,146.5,704,146.5z"

        calcMode      = "spline"
        keySplines    = "0 0.75 0.25 1"
        keyTimes      = "0;1;2"
        />

If I remove values an adjust keyTimes="0;1", it works. If I remove calcMode, keySplines and keyTimes, it works. But it doesn't work together. Did I made a mistake somewhere, or can't we use both together?

Thanks for helping!

Answer 1

From the SVG Specification:

the ‘keySplines’ values are the control points. Thus, there must be one fewer sets of control points than there are ‘keyTimes’.

You've one keySplines value so you need 2 keyTimes values. Alternatively, you need to have 2 keySplines values in order to support 3 keyTimes values.