SVG SMIL animateTransform easing

Question

타이밍 함수를 간단한 SVG SMIL 애니메이션에 추가하려고합니다. 분명히 그러나 내 예제가 작동하지 않습니다는 keySplines 속성을 설정할 수 있습니다 완화/타이밍 : 여기

<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> 

는 데모입니다 : http://jsfiddle.net/q4e4049s/, 검은 색 하나는 완화해야

Answer 1

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 50 50"> 
 
\t <rect style="fill:#000;" width="4" height="4" x="3" y="11"> 
 
\t \t <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" 
 
    /> 
 
\t </rect> 
 
\t <rect style="fill:#ff0000;" width="4" height="4" x="3" y="16"> 
 
\t \t <animateTransform 
 
     attributeName="transform" 
 
     begin="0s" 
 
     dur="2s" 
 
     type="translate" 
 
     from="0 0" 
 
     to="40 0" 
 
     repeatCount="4" 
 
     fill="freeze" 
 
    /> 
 
\t </rect> 
 
</svg>