Bug 124366

Summary: When a CSS Animation is applied to a SVG path that has two property changes, only the last defined property is animated.
Product: WebKit Reporter: Ben Frain <contact>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Major CC: bfulgham, kari.pihkala, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.8   
URL: http://codepen.io/benfrain/pen/hLFwn

Description Ben Frain 2013-11-14 09:29:01 PST 
It should be possible to animate two CSS properties on an SVG with a CSS animation. This behaviour can be seen in Firefox but Safari (and Chrome) only render the last defined property change.
Comment 1 Ben Frain 2013-11-22 07:51:43 PST 
Chrome had the same issue and it has been confirmed as a bug there: https://code.google.com/p/chromium/issues/detail?id=319407

The workaround is to ensure a fill property is declared (although the is obviously still a bug).
Comment 2 Brent Fulgham 2022-07-15 16:44:57 PDT 
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.

(Tested with test case used in the Chromium bug).