Firefox -- Dynamically embedding <svg> element in SVG

Posted by zourtney on Stack Overflow See other posts from Stack Overflow or by zourtney
Published on 2010-05-21T19:07:49Z Indexed on 2010/05/21 19:10 UTC
Read the original article Hit count: 576

Filed under:

firefox

|

svg

|

JavaScript

I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected:

<svg xmlns="http://www.w3.org/2000/svg">
    <svg xmlns="http://www.w3.org/2000/svg">
        ...         
    </svg>
</svg>

However, if you dynamically add this element using JavaScript, the browser crashes. Simple example:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
    <title>SVG island example</title>
    <script type="text/javascript"><![CDATA[
        function crash( )
        {
            svgs = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "svg" );

            for ( var i = 0; i < svgs.length; i++ )
            {
                var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
                svgs[i].appendChild( e );
            }
        }
    ]]></script>
</head>
<body>
    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg">
    </svg>
    <button onclick="crash()">Crash Firefox</button>
</body>
</html>

Interestingly, if I do a getElementById, it works fine. Interesting, but not particularly helpful in my situation since I'm storing pointers to SVGDocuments. Example:

function doesntCrash( )
{
    var svg = document.getElementById( "mySVG" );
    var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
    svg.appendChild( e );
}

As far as I can tell, this is a Firefox bug. Does anyone have any insight into this matter?

Developer IT