Я пытаюсь динамически добавить элемент <svg> к существующему островку SVG на странице XHTML (Firefox 3.6.3).И это приводит к сбою браузера.
Выполнено вручную, это работает как ожидалось:
<svg xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
</svg>
Однако, если вы динамически добавляете этот элемент с помощью JavaScript, браузер аварийно завершает работу.Простой пример:
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
Интересно, если я сделаю getElementById, он будет работать отлично .Интересно, но не особенно полезно в моей ситуации, так как я храню указатели на SVGDocument s.Пример:
function doesntCrash( )
{
var svg = document.getElementById( "mySVG" );
var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svg.appendChild( e );
}
Насколько я могу судить, это ошибка Firefox. У кого-нибудь есть понимание этого вопроса?
ОБНОВЛЕНО (решение): Как указано ниже, проблема заключалась в "живучести" HTMLCollection, возвращаемого вызовом getElementsByTagNameNS, который я принял за собственный массив ( tsk, tsk! )hackaround будет хранить длину массива в переменной, если вы только добавляете.Лучшим решением может быть копирование содержимого массива в собственный массив, как описано здесь .Вот обновление с использованием этого метода:
function doesntCrash( )
{
var svgs = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "svg" );
// copy contents to native a static, array
svgs = Array.prototype.slice.call( svgs );
for ( var i = 0; i < svgs.length; i++ )
{
var e = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svgs[i].appendChild( e );
}
}
Спасибо, Сергей Ильинский, за быстрый ответ!