Firefox -- Dynamically embedding <svg> element in SVG
- by zourtney
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?
