使用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结构中。＆＃39;
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 =＆＃34; none＆＃34;或者viewBox很小

Answer 2

如果你的HTML是正确的，请打开＆＃34; Elements＆＃34;在Chrome开发工具面板上，查看svg＆＃39;显示屏＆＃39; （块），＆＃39;高度＆＃39;，＆＃39;宽度＆＃39;，＆＃39;可见性＆＃39; （可见）和＆＃39;不透明度＆＃39; （＆gt; 0）属性。如果渲染引擎确实显示了任何内容（可见或不可见），当您将鼠标悬停在＆＃34; Elements＆＃34;中的DOM节点上时，chrome将在页面中勾勒出它。 还要检查是否有任何掩码/覆盖SVG节点。

另外，您可以尝试设置“填充”字样。或者＆＃39;中风＆＃39;你的svg节点上的颜色。