Bug 89308

Summary: keySplines attribute ignored when no values-like attribute specified
Product: WebKit Reporter: Mihai Alexandru Bîrsan <alexandru.m.birsan>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, alexandru.m.birsan, bfulgham, karlcow, letmespellitoutforyou, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=257094
Attachments:
Description Flags
testcase
none
rendering in safari, firefox, chrome none

Mihai Alexandru Bîrsan
Reported 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>
Attachments
testcase (5.53 KB, image/svg+xml)
2025-08-14 00:15 PDT, Karl Dubost
no flags
rendering in safari, firefox, chrome (646.21 KB, image/png)
2025-08-14 00:17 PDT, Karl Dubost
no flags
Mike Sierra
Comment 1 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.
Brent Fulgham
Comment 2 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.
Radar WebKit Bug Importer
Comment 3 2022-07-15 15:17:13 PDT
Karl Dubost
Comment 4 2025-08-14 00:15:02 PDT
Created attachment 476399 [details] testcase The testcase mentioned in the initial report.
Karl Dubost
Comment 5 2025-08-14 00:17:02 PDT
Created attachment 476400 [details] rendering in safari, firefox, chrome Safari is showing the path now. but the circle clearly deviates from the trajectory.
Note You need to log in before you can comment on or make changes to this bug.