When creating an animation that only specifies the to, from and/or by attributes, the keySplines attribute is ignored. The keySplines attribute works fine with the values attribute. I found a workaround is to specify the keyTimes="0;1" attribute. An example in the wild: http://hoffmann.bplaced.net/svgtest/anitrafokeysplines01.svg Inline example: <!-- doesn't work --> <rect x="0" y="0" width="0" height="50" fill="red"> <animate attributeName="width" to="300" dur="3s" calcMode="spline" keySplines="0.42,0,0.58,1" fill="freeze" /> </rect> <!-- works because of keyTimes attribute --> <rect x="0" y="50" width="0" height="50" fill="red"> <animate attributeName="width" to="300" dur="3s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" fill="freeze" /> </rect> <!-- works because of values attribute --> <rect x="0" y="50" width="0" height="50" fill="red"> <animate attributeName="width" values="0;300" dur="3s" calcMode="spline" keySplines="0.42,0,0.58,1" fill="freeze" /> </rect>
I just observed the same bug while doc'ing keySplines. View this SVG: http://letmespellitoutforyou.com/samples/t/anim_swipe.svg Mozilla displays correct behavior in which the text slows to a halt.
Firefox seems to work properly. It animates a circle along a visible curved path/rail. Chrome shows the rail, but always animates the circle in a diagonal direction. Safari does not show the rail, so it's difficult to know if it's following the proper path.
<rdar://problem/97097024>