从 SVG 代码附加 SVG 元素

Question

我有一些基础 HTML 比如：

<body>
    <svg id="msvg"></svg>
<body>

我想添加（例如）一个<g><circle cx="10" cy="50" r="20"/><rect width="200" height="400" /> </g> 将元素添加到我的 SVG 中。

元素在 JavaScript 中以字符串形式给出。

我想过这样的事情：

function addSVG(svg) {
    var e = document.getElementById("msvg");
    var nodeelem = document.createElementNS("http://www.w3.org/2000/svg", "template");
    nodeelem.innerHTML = svg;
    e.appendChild(nodeelem.content.firstChild);
}

但这行不通。

我正在使用 Chromium Embedded，所以 chrome 特定的答案也很好。

Answer 1

要访问 nodeelem 的第一个子项，您需要使用 nodeelem.firstChild 而不是 nodeelem.content.firstChild。

演示：https://jsfiddle.net/iRbouh/su3xrfd9/

Answer 2

我很确定有不止一种方法（而且这不会是最好的？），但您可以尝试：

var svg = '<g><circle cx="10" cy="50" r="20"/><rect width="200" height="400" /> </g>';
var e = document.getElementById("msvg");
var svgObj = (new DOMParser()).parseFromString(svg, 'application/xml');
e.innerHTML = svgObj.documentElement.outerHTML;

从 SVG 代码附加 SVG 元素

Appending SVG elements from SVG code

html

javascript

svg

dynamic-content