Jquery .html（）方法等效于SVG元素

我一直在为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);

从“/path/to/svg”导入图像；
//从另一个文件导入的图像，看起来像。。。
g、 追加（'圆'）
.attr（'r'，1）
.attr（'cx'，0）
.attr（'cy'，0）；
g、 附加（'g'）
.html（图像）；

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

（我假设您使用的是D3.js，因为您将问题标记为D3.js）。在D3.js中，

.html（）

相当于

.innerHTML

。它在某些浏览器中“起作用”，但实际上它被解析为HTML，所以它实际上是一种黑客行为。如果您不想在不起作用的浏览器中使用它，而

.innerHTML

确实起作用，则只需更换它：

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

从那里，您可以使用DOM将其附加到

：

g.node().appendChild(svg);

g.node().appendChild(svg);