Bug 74801

Summary: Creating <animate> elements on DOM event after window load do not execute
Product: WebKit Reporter: Chirag Moradiya <chirag>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, dino, graouts, nathan, rniwa, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Additional test case none

Chirag Moradiya
Reported 2011-12-17 21:22:33 PST
Hi this is the variation of bug 34301. I want to create an SVG element on a DOM event e.g. click on a button. This SVG is having <animate> tag inside so the animation can start immediately or beginElement() call, depends on configuration. I am not able to complete this task due to this bug. Conside following HTML Page: <!DOCTYPE html> <html> <head> <title>The Rainbow Tree</title> <script type="text/javascript"> function createSVG(){ chetan1 = document.getElementById('chetan11'); svgns = "http://www.w3.org/2000/svg"; xlinkns = "http://www.w3.org/1999/xlink"; elSvg = document.createElementNS(svgns, 'svg'); // create all svg DOM elements. elSvg.setAttribute('width', '120px'); elSvg.setAttribute('height', '76px'); elSvg.setAttribute('xmlns', svgns); elSvg.setAttribute('xmlns:xlink', xlinkns); chetan1.appendChild(elSvg); // Image DOM var elImage = document.createElementNS(svgns, 'image'); elImage.setAttributeNS(xlinkns, 'xlink:href', 'ladybird_small.png'); // var $Image = $(elImage); elImage.setAttribute('width', '60px'); elImage.setAttribute('height', '38px'); elSvg.appendChild(elImage); elAniamte = document.createElementNS(svgns, 'animate'); elAniamte.setAttribute('attributeName', 'x'); elAniamte.setAttribute('attributeType', 'XML'); elAniamte.setAttribute('from', '10'); elAniamte.setAttribute('to', '30'); elAniamte.setAttribute('dur', '2s'); elAniamte.setAttribute('repeatCount', 'indefinite'); elAniamte.setAttribute('fill', 'freeze'); elImage.appendChild(elAniamte); }; window.onload = function(){ //Here one line will be added based on following cases } </script> </head> <body> <div id="chetan11"></div> <button id="start">start</button> </body> </html> Case 1: > createSVG(); Case 2: > document.getElementById("start").addEventListener('click', createSVG); In Case1, I am directly creating SVG on load event of winodw. Here, animation starts on window load. In Case2, I am creating SVG on click of the button. Here, image is shown when svg is added to the page, but animation doesn't start.
Attachments
Additional test case (1.27 KB, text/html)
2012-04-21 18:17 PDT, Nathan Wright 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Nathan Wright
Comment 1 2012-04-21 18:17:18 PDT
Created attachment 138261 [details] Additional test case I've narrowed down this issue a bit more. It's possible to create an animation using javascript if and only if the SVG element was first rendered during page load. For example, if the SVG was created using an inline script inside the document tag, you can later inject animation elements and they will indeed work. If the SVG creation happens any time after the document has finished loading, the injected animate elements will not respond to beginElement(). This test case fails in Webkit 535.19 (Chrome 18.0.1025.163) and Webkit 534.51.22 (Safari 5.1.1). Firefox 11 behaves correctly.
Ahmad Saleem
Comment 2 2022-05-31 14:01:39 PDT
The attached test case behaves similar in Safari 15.5 on macOS 12.4 to other browser - Chrome Canary 104 and Firefox Nightly 103. Can this be closed with "RESOLVED CONFIGURATION CHANGED" status. In case, if I have tested this wrong or this bug is about something else. Please keep it open and update accordingly. Thanks!
Ryosuke Niwa
Comment 3 2022-06-29 23:14:44 PDT
Test works fine in Safari now.
Note You need to log in before you can comment on or make changes to this bug.