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.
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.
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!
Test works fine in Safari now.