使用JavaScript将SVG添加到DOM中，但不可见。

Question

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

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

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

我查看了HTML源代码，发现SVG已添加到HTML中。但是SVG在页面上不可见。有任何想法是什么原因？

注意：

1. D3工作正常。

2. SVG有效。

3. SVG被添加到body的DOM结构中。

4. 在Chrome和Firefox中都不可见。

- Gokul N K

---

你能在添加svg后发布生成的html吗？ - francadaval

确保将要添加到DOM中的内容在其容器正确显示在DOM中之后再进行添加，而不是之前。 - vsync

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非常小。

- Francis Hemsher

---

那真的对我有帮助。你有什么想法，为什么只有在尝试使用JavaScript插入时才有影响呢？ - Gokul N K

我相信，如果您没有指定SVG命名空间，d3.xml将作为原始XML加载。 - Francis Hemsher

Answer 2

如果你的HTML代码正确，打开Chrome开发工具中的“元素”面板，检查SVG的“display”（块）、“height”、“width”、“visibility”（可见）和“opacity”（> 0）属性。如果渲染引擎确实有任何东西要显示（无论是否可见），当你在“元素”中悬停在DOM节点上时，Chrome会在页面中将其轮廓化。 此外，还要检查是否有任何东西可能掩盖/覆盖SVG节点。

另外，您可以尝试在SVG节点上设置“fill”或“stroke”颜色。

- craPkit