為什么未顯示SVG路徑？

Question

我有一個位於某些節點頂部的SVG，然后動態繪制這些SVG路徑，以便它們可以連接到此類節點。 但是，由於某種原因，一旦生成路徑，我的路徑就不會顯示。

這是最奇怪的部分…… 它們僅顯示是否在我進入我的inspect元素內，稍微編輯HTML並再次呈現時 。

這是一個gif：

這是生成路徑的代碼：

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttributeNS(null, 'id', 'path' + index);
path.setAttributeNS(null, 'd', 'M0 0');
path.setAttributeNS(null, 'stroke', '#484848');
path.setAttributeNS(null, 'fill', 'none');
path.setAttributeNS(null, 'stroke-width', '4px');

最好是您實際看一個實際的例子，所以我在這里有一支筆： http : //codepen.io/anon/pen/OWaEdd

請幫助有需要的人。 我想知道（並修復）為什么在生成路徑時我的路徑不顯示。 我將不勝感激！

Answer 1

您似乎很欣賞在使用createElementNS創建<path>時需要在SVG命名空間中創建元素。 您的問題是您沒有使用相同的功能創建<svg>元素。

隨后對“ xmlns”的setAttribute的調用是不正確的，可以將其刪除，名稱空間是元素創建的副作用，使用setAttribute設置后，就不能設置它了。