|JS-created SVG <animate> element does not work|
|Reported by phrog...@gmail.com, Apr 10 2012||Back to list|
Chrome Version : 18.0.1025.151 OS Version: 6.1 (Windows 7, Windows Server 2008 R2) URLs (if applicable) : http://phrogz.net/svg/change-color-on-click-simple.svg http://phrogz.net/svg/change-color-on-click-simple-js.svg Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari 5: OK Firefox 11: OK IE 9: FAIL (SVG SMIL animations not supported) What steps will reproduce the problem? 1. Load the first URL, click on circle. --> Animation is triggered (if buggy) 2. Load the second URL, click on the circle. What is the expected result? Animation from JS-created `<animate>` element should occur. What happens instead? No animation. Please provide any additional information below. Attach a screenshot if possible. UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19 Discussion: http://stackoverflow.com/questions/10093315/why-does-this-js-created-svg-animation-not-work-in-chrome The namespaceURI of the <animate> element and all its attributes have been verified to be the same between the working version and the non-working version.
Apr 10 2012,
Note that (per the answer on Stack Overflow) if the `<animate>` element's attributes are set _before_ the element is appended to the document then it works as desired.
Apr 11 2012,
Jun 14 2012,
Here's a closely related example involving cloned svg elements. The SMIL animations in the cloned elements never get kicked off, although the cloned child elements all appear to be created and namespaced correctly. This works in Opera and FF, fails in Webkit: http://jsfiddle.net/k2CAs/3/ This fiddle might seem to be an oddball use case, but the problem extends to running either importNode() or adoptNode() on an externally loaded SVG as well, which is quite hobbling for dynamic applications using SVG. To make matters worse, running svgroot.setCurrentTime(0) or even svgroot.pauseAnimations() svgroot.setCurrentTime(0) svgroot.unpauseAnimations() doesn't get things going in the clone either. The only way for developers to address this in Webkit is to iterate over all the elements, cueing them by script one at a time, which is a lot of overhead and rather defeats the convenience of declarative animation...
Mar 10 2013,
Apr 6 2013,
Apr 6 2013,
Jun 17 2014,
Works on ToT.
Jun 17 2014,
What is ToT? I just tested in Canary and the fiddle in #3 is fixed, but the OP's bug still stands.
Jun 18 2014,
Ah, yes, I missed the begin=click in the *-js.svg there... Reopening.
Mar 9 2015,
Issue 449161 has been merged into this issue.
May 11 2015,
I am working on this bug.
May 13 2015,
The following revision refers to this bug: http://src.chromium.org/viewvc/blink?view=rev&rev=195296 ------------------------------------------------------------------ r195296 | email@example.com | 2015-05-13T05:54:40.419653Z Changed paths: A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/svg/animations/animation-begin-change-js.html?r1=195296&r2=195295&pathrev=195296 M http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/animation/SVGSMILElement.cpp?r1=195296&r2=195295&pathrev=195296 SVG animate element's begin/end attribute set by js, should animate. When begin/end attribute changed, new conditions can be formed. So it needs to connect the event base conditions again. BUG=122846 Review URL: https://codereview.chromium.org/1127313007 -----------------------------------------------------------------
Dec 10 2015,
Removing Cr-Blink from issues that already have Cr-Blink sub-label set.
Mar 3 2016,
Issue 232283 has been merged into this issue.
This issue has been available for more than 365 days, and should be re-evaluated. Please re-triage this issue. The Hotlist-Recharge-Cold label is applied for tracking purposes, and should not be removed after re-triaging the issue. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Verified this is still happening.
|► Sign in to add a comment|