Bug 89308 – keySplines attribute ignored when no values-like attribute specified

• Component: SVG
• Status: NEW

[Mihai Alexandru Bîrsan]

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>

[Mike Sierra]

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.

[Brent Fulgham]

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.

[Radar WebKit Bug Importer]

<rdar://problem/97097024>

[Karl Dubost]

Created attachment 476399 [details]
testcase

The testcase mentioned in the initial report.

[Karl Dubost]

Created attachment 476400 [details]
rendering in safari, firefox, chrome

Safari is showing the path now. but the circle clearly deviates from the trajectory.