[Webkit-unassigned] [Bug 74801] New: Creating <animate> elements on DOM event after window load do not execute

Sat Dec 17 21:22:33 PST 2011

https://bugs.webkit.org/show_bug.cgi?id=74801

           Summary: Creating <animate> elements on DOM event after window
                    load do not execute
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: chirag at dreamworldsolutions.com
                CC: zimmermann at kde.org

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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.