将 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 at the movies take 2，您会发现一个简单的wrapper script that implements 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);
}