Question

我一直在寻找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也有类似的问题，但我发现的答案已经过时，导致链接断开等。

Answer 1

（我假设你正在使用D3.js，因为你标记了你的问题）。在D3.js .html()相当于.innerHTML。它在某些浏览器中“有效”，但实际上它被解析为HTML，所以它实际上是一个黑客。如果您不想在浏览器中使用它而无法使用.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);

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

1 个答案: