Bug 158212 – Cannot animate 'r' property of SVG using CSS

• Status: RESOLVED
• Resolution: INVALID
• Component: SVG

[Mike Lawther]

Created attachment 280107 [details]
Test for animating 'r' using CSS

Tested using Webkit Nightly (9.1.1 (11601.6.17, r201498)) on OSX 10.11.5

The 'r' attribute of an SVG circle cannot be animated using CSS (see attached test). The attached test does work as expected in Chrome (tested using 52.0.2743.10 dev (64-bit)). 

With reference to https://bugs.webkit.org/show_bug.cgi?id=135978, I expected this to work.

fwiw, 'cx' and 'cy' cannot be animated with CSS either.

[Said Abou-Hallawa]

Created attachment 280158 [details]
Test for animating 'r' using SMIL

[Said Abou-Hallawa]

I think Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. So I am not sure if WebKit has to do the same or it has to support both. The attached test case uses SMIL and it animates in WebKit and Gecko. Gecko does not animate the SVG with CSS animation.

[Mike Lawther]

SMIL is an alternative to workaround this in Webkit, but it is also not compatible across browsers (eg IE/Edge do not support SMIL).

Gecko should support animating SVG with CSS, but there was a regression (https://bugzilla.mozilla.org/show_bug.cgi?id=908634).

[Mike Lawther]

Created attachment 281900 [details]
Test demonstrating that animating 'width' and 'height' using CSS does work

I'll try another example. Attached is a similar test showing that WebKit does correctly animate the 'width' and 'height' properties of an SVG rect using CSS.

Animating 'r', 'cx, 'cy' etc using CSS is supposed to work. It's a (probably trivial) WebKit bug that they don't.

[Dirk Schulze]

Animating those properties does work. Keep in mind that the properties REQUIRE length units just like with and height. Add a px at the end and they start animating.