SVG SMIL animateTransform easing

Question

I am trying to add a timing function to a simple SVG SMIL animation. Apparently timing/easing can be set with the keySplines attribute, however in my example it does not work:

<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">

    <rect style="fill:#000;" width="4" height="4" x="3" y="11">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze"
        calcMode="spline"
        keySplines="0.4, 0, 0.2, 1"/>
    </rect>

    <rect style="fill:#ff0000;" width="4" height="4" x="3" y="16">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze" />
    </rect>

</svg>

Here is a demo: http://jsfiddle.net/q4e4049s/ , the black one should have easing

Indeed, looks right in Firefox but fails in Chrome. Bug? Different syntax? — Mircea
Works if you add keyTimes="0;1", essentially you're depending on an implicit keyTimes if you don't add that, which seems fine to me. The SVG spec is IMHO not 100% clear that an implicit keyTimes should be used in this case. — Erik Dahlström
@ErikDahlström Indeed that did the trick in Chrome. Thank you — Mircea

Angelo Lucas Angelo Lucas · Accepted Answer · 2017-03-28T03:08:37

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 50 14">
    <rect fill="black" width="6" height="6" x="3" y="0">
        <animateTransform attributeName="transform" 
                          begin="0s"
                          dur="2s"
                          type="translate"
                          from="0 0"
                          to="40 0"
                          repeatCount="4"
                          fill="freeze"
                          calcMode="spline"
                          keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
                          values="0;30;0"/>
    </rect>
    <rect fill="red" width="6" height="6" x="3" y="7">
        <animateTransform attributeName="transform"
                          begin="0s"
                          dur="2s"
                          type="translate"
                          from="0 0"
                          to="40 0"
                          repeatCount="4"
                          fill="freeze"/>
    </rect>
</svg>

SVG SMIL animateTransform easing

1 Answers