Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 6 users
Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment
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.
 
change-color-on-click-simple-js.svg
537 bytes View Download
Comment 1 by phrog...@gmail.com, 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.
Comment 2 by tkent@chromium.org, Apr 11 2012
Labels: -Area-Undefined Area-WebKit WebKit-SVG
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...
Project Member Comment 4 by bugdroid1@chromium.org, Mar 10 2013
Labels: -Area-WebKit -WebKit-SVG Cr-Content-SVG Cr-Content
Project Member Comment 5 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content Cr-Blink
Project Member Comment 6 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content-SVG Cr-Blink-SVG
Comment 7 by f...@opera.com, Jun 17 2014
Status: WontFix
Works on ToT.
What is ToT? I just tested in Canary and the fiddle in #3 is fixed, but the OP's bug still stands.
Comment 9 by f...@opera.com, Jun 18 2014
Labels: -OS-Windows OS-All
Status: Available
Ah, yes, I missed the begin=click in the *-js.svg there... Reopening.
Cc: ashej...@chromium.org
 Issue 449161  has been merged into this issue.
I am working on this bug.
Project Member Comment 12 by bugdroid1@chromium.org, May 13 2015
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=195296

------------------------------------------------------------------
r195296 | shanmuga.m@samsung.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
-----------------------------------------------------------------
Labels: -Cr-Blink
Removing Cr-Blink from issues that already have Cr-Blink sub-label set.
Comment 14 by f...@opera.com, Mar 3 2016
Cc: pdr@chromium.org
 Issue 232283  has been merged into this issue.
Project Member Comment 15 by sheriffbot@chromium.org, Mar 3
Labels: Hotlist-Recharge-Cold
Status: Untriaged
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
Status: Available
Labels: -Hotlist-Recharge-Cold PaintTeamRetriaged-20170303 BugSource-User
Verified this is still happening.
Sign in to add a comment