Bug 89308 - keySplines attribute ignored when no values-like attribute specified
Summary: keySplines attribute ignored when no values-like attribute specified
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2012-06-17 09:26 PDT by Mihai Alexandru Bîrsan
Modified: 2023-05-20 16:16 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Mihai Alexandru Bîrsan 2012-06-17 09:26:44 PDT
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>
Comment 1 Mike Sierra 2013-04-11 13:48:56 PDT
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.
Comment 2 Brent Fulgham 2022-07-15 15:17:02 PDT
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.
Comment 3 Radar WebKit Bug Importer 2022-07-15 15:17:13 PDT
<rdar://problem/97097024>