.html() 方法等效于 SVG 元素

【问题标题】：.html() method equivalent for SVG elements.html() 方法等效于 SVG 元素
【发布时间】：2016-11-18 21:10:03
【问题描述】：

我一直在为 SVG 元素的 .html() 方法寻找一个好的替代方法。 .html() 适用于 Chrome 和 Safari，可能是 Firefox，但不适用于 IE 或 Edge。

以下是我想要实现的目标。

HTML

<svg class="root">
  <g>
  </g>
</svg>

JQuery

import image from '/path/to/svg';

// image imported from another file, looks like <svg>...</svg>

g.append('circle')
    .attr('r', 1)
    .attr('cx', 0)
    .attr('cy', 0);
g.append('g')
    .html(image);

关于 SO 有类似的问题，但我发现的答案已经过时，导致链接断开等。

【问题讨论】：

标签： jquery xml d3.js svg

【解决方案1】：

（我假设您使用的是 D3.js，因为您将问题标记为这样）。在 D3.js 中，.html() 等价于 .innerHTML。它在某些浏览器中“工作”，但它实际上被解析为 HTML，所以它实际上是一个 hack。如果您不想在它不起作用的浏览器中使用它，而 .innerHTML 可以，那么只需替换它：

g.node().innerHTML ="<svg><circle cx='50' cy='50' r='30' fill='red'/></svg>";

node() 方法返回原始 DOM 节点（它允许您调用 DOM 方法并引用 DOM 属性）。

但是在 D3.js 中加载 SVG 的一种更好方法是使用 d3.xml():

d3.xml("sample.svg",
        function(xmlData) {

    var svg = xmlData.documentElement;
    console.log(svg);

    // do something with the imported SVG
}

您可以从那里使用 DOM 将其附加到 <g>：

g.node().appendChild(svg);

【讨论】：