使用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節點上設置“填充”或“筆觸”顏色。