使用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正在被添加到正文中的DOM结构中。
4. 它在chrome和firefox中都不可见。

Answer 1

在IE / FF / CH中可以正常使用。 我有有效的svg，在我的root svg中有以下内容：

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

如果你有这个命名空间，那么问题很可能是svg没有正确形成。 或者可能，svg本身是不可见的，即display =“none”或viewBox很小

Answer 2

如果你的HTML是正确的，打开Chrome开发工具上的“元素”面板，检查svg的'display'（块），'height'，'width'，'visibility'（可见）和'opacity'（> 0）属性。 如果渲染引擎确实显示了任何内容（可见或不可见），当您将鼠标悬停在“Elements”中的DOM节点上时，chrome将在页面中勾勒出轮廓。 还要检查是否有任何掩码/覆盖SVG节点。

另外，您可以尝试在svg节点上设置“填充”或“笔触”颜色。