74801 2011-12-17 21:22:33 -0800 Creating <animate> elements on DOM event after window load do not execute 2022-06-29 23:14:44 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) All All RESOLVED CONFIGURATION CHANGED P2 Normal --- 0 chirag webkit-unassigned ahmad.saleem792 ap dino graouts nathan rniwa zimmermann oldest_to_newest 523400 0 chirag 2011-12-17 21:22:33 -0800 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. 607306 1 138261 nathan 2012-04-21 18:17:18 -0700 Created attachment 138261 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. 1873123 2 ahmad.saleem792 2022-05-31 14:01:39 -0700 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! 1879271 3 rniwa 2022-06-29 23:14:44 -0700 Test works fine in Safari now. 138261 2012-04-21 18:17:18 -0700 2012-04-21 18:17:18 -0700 Additional test case test.html text/html 1302 nathan PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgVHJhbnNpdGlvbmFs Ly9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSL3hodG1sMS9EVEQveGh0bWwxLXRyYW5zaXRpb25h bC5kdGQiPgo8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+CjxoZWFk PgoJPHNjcmlwdD4KCQl2YXIgU1ZHX0hUTUwgPSAnPHN2ZyB3aWR0aD0iODk4IiBoZWlnaHQ9IjIz NyI+PGRlZnM+PC9kZWZzPjxnPjxyZWN0IHg9IjUwIiB5PSI1MCIgd2lkdGg9IjIwMCIgaGVpZ2h0 PSIyMDAiIHN0cm9rZS13aWR0aD0iMTAwIiBzdHJva2U9InJlZCI+PC9yZWN0PjwvZz48L3N2Zz4n OwoJCWZ1bmN0aW9uIGNyZWF0ZVNWRygpIHsKCQkJdmFyIGVsID0gZG9jdW1lbnQuY3JlYXRlRWxl bWVudCgnZGl2Jyk7CgkJCWRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoZWwpOwoJCQllbC5pbm5l ckhUTUwgPSBTVkdfSFRNTDsKCQkJZWwub25jbGljayA9IGFuaW1hdGU7CgkJfTsKCQlmdW5jdGlv biBhbmltYXRlKGV2ZW50KSB7CgkJCXZhciB0YXJnZXQgPSBldmVudC50YXJnZXQ7CgkJCXZhciBh bmltYXRpb24gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIw MDAvc3ZnJywgJ2FuaW1hdGUnKTsKCQkJYW5pbWF0aW9uLnNldEF0dHJpYnV0ZU5TKG51bGwsICdh dHRyaWJ1dGVOYW1lJywgJ3N0cm9rZS13aWR0aCcpOwoJCQlhbmltYXRpb24uc2V0QXR0cmlidXRl TlMobnVsbCwgJ2F0dHJpYnV0ZVR5cGUnLCAnWE1MJyk7CgkJCWFuaW1hdGlvbi5zZXRBdHRyaWJ1 dGVOUyhudWxsLCAnYmVnaW4nLCAnaW5kZWZpbml0ZScpOwoJCQlhbmltYXRpb24uc2V0QXR0cmli dXRlTlMobnVsbCwgJ3RvJywgMSk7CgkJCWFuaW1hdGlvbi5zZXRBdHRyaWJ1dGVOUyhudWxsLCAn ZHVyJywgMC41KTsKCQkJYW5pbWF0aW9uLnNldEF0dHJpYnV0ZU5TKG51bGwsICdmaWxsJywgJ2Zy ZWV6ZScpOwoJCQl0YXJnZXQuYXBwZW5kQ2hpbGQoYW5pbWF0aW9uKTsKCQkJYW5pbWF0aW9uLmJl Z2luRWxlbWVudCgpOwoJCX07Cgk8L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KCVRoaXMgYW5pbWF0 ZXMganVzdCBmaW5lIChjbGljayB0aGUgZWxlbWVudCk6Cgk8c2NyaXB0PgoJCWNyZWF0ZVNWRygp OwoJPC9zY3JpcHQ+CgoJVGhpcyBTVkcgaXMgZHJhd24gMjAwbXMgYWZ0ZXIgcGFnZSBsb2FkIGFu ZCB3aWxsIG5vdCBhbmltYXRlIHdoZW4geW91IGNsaWNrIGl0OgoJPHNjcmlwdD4KCQlzZXRUaW1l b3V0KGNyZWF0ZVNWRywgMjAwKTsKCTwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K