добавление строки SVG к DOM

Question

Я пытаюсь добавить строку элементов SVG в DOM. Это моя установка.

var oFragment = '';
for (var i = 0; i < 10; i++) {
oFragment += '<g><path id="note-'+i+'" d="M 6,3 84,6  c 0,0 -6,76 14,91  L 58,97 19,89  c 0,0 -24,-5 -13,-86 z" style="fill:#ffc835;" /></g> ';
}

Вот что я попробовал. Выдает следующую ошибку: «parseXML не определен»

var oSVG = document.getElementById("svg-wall").getSVGDocument();
var oNotes = oSVG.getElementById('notes');
oNotes.appendChild(parseXML(oFragment, document));

Итак, мой вопрос: что я делаю неправильно, и это даже лучший способ добавить строку svg в dom?

Answer 1

parseXML является частью SVG Tiny 1.2 , но методы интерфейса SVGGlobal в настоящее время не поддерживаются ни одним веб-браузером AFAIK. Однако вполне возможно реализовать его с использованием других технологий. Если вы посмотрите внизу этого моего поста, SVG в фильмах занимает 2 , вы найдете простой скрипт-обертку, который реализует parseXML (должен нормально работать в Opera, Firefox и webkit). Для примеров использования этого скрипта взгляните на источник демонстраций в этом посте.

Answer 2

Не думаю, что есть бесплатная функция с именем parseXML (вам не хватает некоторых функций?).

А так как вы все равно имеете дело с DOM, просто не вставляйте элементы напрямую с DOM?

for (var i = 0; i < 10; ++ i) {
   var path = document.createElement("path");
   path.setAttribute("id", "note-" + i);
   ...
   var g = document.createElement("g");
   g.appendChild(path);
   oNotes.appendChild(g);
}