使用 javascript 添加到 DOM 的 SVG 不可见。

Question

我有一个有效的 SVG 文件，我通过在图像查看器中打开它来验证该文件。

我尝试使用 javascript 代码将此 SVG 添加到 HTML 文件中

d3.xml("assets/abc.svg", function(xml) {
   document.body.appendChild(xml.documentElement);
});

我检查了 HTML 源代码，可以看到 HTML 中添加了 SVG。但 SVG 在页面上不可见。知道可能是什么原因吗？

笔记 ：

1. D3 运行良好。
2. SVG 有效。
3. SVG 正在添加到 body 内的 DOM 结构中。
4. 它在 Chrome 和 Firefox 中都不可见。

Answer 1

在 IE/FF/CH 中对我来说工作正常。我有有效的 svg，根 svg 中有以下内容：

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
...>

如果您有该命名空间，那么问题很可能是 svg 的形成不正确。或者可能，svg 本身不可见，即 display="none" 或 viewBox 很小