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元素

2 个答案: