Добавление большего количества svg элементов к моему документу во времени выполнения

Question

Добавление большего количества svg элементов к моему документу во времени выполнения

У меня есть файл HTML, я добавляю, элемент к нему динамично, затем прямоугольник. Работы хорошо в различных браузерах (игнорирующий IE). Когда я пытаюсь использовать тот же метод для динамичного создания элемента, он не работает в Chrome или Safari, только в Opera. Мой синтаксис неправильно, или разве WebKit, вероятно, просто не поддерживает добавляющие элементы во времени выполнения? (тот же элемент хорошо работает, если я объявляю это как теги заранее вместо этого). Возможно, я, как предполагается, не использую appendChild () с этими типами узлов? Вот то, что я имею, необходимо смочь вывести его в файл HTML и выполнить его. Если у кого-либо есть какая-либо идея, если бы существует путь вокруг этого, это было бы большим:

<html>
<head>
  <script>

    window.onload = function() {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
        svg.setAttribute('version', '1.1');
        svg.setAttribute('width', '800px');
        svg.setAttribute('height', '400px');
        document.body.appendChild(svg);

        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute("id", "myrect"); 
        rect.setAttribute("fill","red");
        rect.setAttribute("stroke","black");
        rect.setAttribute("stroke-width","5");
        rect.setAttribute("x", "100");
        rect.setAttribute("y", "100");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "50");
        svg.appendChild(rect);

        var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');
        anim.setAttribute("attributeName", "width");
        anim.setAttribute("from", "100");
        anim.setAttribute("to", "400");
        anim.setAttribute("dur", "10s");
        anim.setAttribute("begin", "0s");
        anim.setAttribute("fill", "freeze");
        rect.appendChild(anim);
    }

</script>
</head>

<body>
</body>

6

javascript svg

задан user246114 28 January 2010 в 16:54

2 ответа

Другие вопросы по тегам:

javascript svg

Похожие вопросы:

score 0 · Answer 1

ughh Это выглядит как ошибка в WebKit. Вы должны вызвать Node.beginelement (), чтобы получить анимацию начать, но в WebKit это не работает, появляется в отслежении ошибки.

взрыв.

score 4 · Answer 2

Вы действительно должны использовать SetAttributens (NULL, ...) при использовании вызовов пространства имен типа Document.createelementns () .

из XMLGraphics.apache.org/batik/faq.html

Однако важно знать, что некоторые реализации делают Разница между SetAttribute (x, y) и setattributens (null, x, y), Так что хорошая практика для использования SetAttributens, которая является единственным Гарантированный совместимый способ установки атрибутов в пространстве имен Ознакомьтесь с реализацией DOM.