javascript - 将整个 svg 附加到 dom 元素会导致异常... "String contains an invalid character"代码 : "5"

Question

我想将整个 svg 元素附加到 DOM 的无子元素。我尝试了 d3-style 和 common 风格，但都导致了这个错误:

[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (InvalidCharacterError)" location: "<unknown>"]

如何正确附加它？

// with d3
var dropTargetsDiv = d3.select(".droptargets").html("");
dropTargetsDiv.append(svgPic);

// without d3
var dropTargetsDiv = window.document.getElementById("canvas").parentNode;
dropTargetsDiv.innerHTML="";
dropTargetsDiv.appendChild(window.document.createElement(svgPic));

//the svg content is taken from a text area...
var svgPic = scope.$parent.export;

//and looks fine
<svg id="canvas"><g id="dashboard-content"><rect id="dropPanel"></rect></g></svg>

// the structure
<div class="droptargets"...
 <svg id="canvas"...
  <g id="dashboard-content...

Answer 1

D3 的 .append()不获取要追加的元素的内容。引用文档:

Appends a new element with the specified name as the last child of each element in the current selection [...] The name may be specified either as a constant string or as a function that returns the DOM element to append.

所以要附加一个 SVG 元素，你应该这样做

var svg = dropTargetsDiv.append("svg");

然后填充节点的内容，即添加 g 元素和可能存在的任何其他内容。