爲什麼不顯示SVG路徑？

我有一個位於某些節點頂部的SVG，然後我動態地繪製這些SVG路徑，以便它們可以連接到這些節點。但是，一旦我生成路徑，出於某種原因，我的路徑不顯示。爲什麼不顯示SVG路徑？

這裏是最奇怪的部分... 他們只顯示我是否進入我的檢查元素，編輯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

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

來源

2017-02-11 George Edward Portillo

筆在Safari和Chrome中對我來說工作得很好。 – jcaron

@jcaron我的回答得到了回答！但是你提出了一個很好的觀點。我會繼續並再次「打破」我的劇本。我在那裏發表評論如何解決它。謝謝！ –

您似乎明白，您需要在使用createElementNS創建<path>時在SVG名稱空間中創建元素。你的問題是，你不會創建具有相同功能的<svg>元素。

對'xmlns'的setAttribute後續調用不正確，可以刪除，名稱空間是元素創建的副作用，它不是您可以在事後用setAttribute設置的東西。

來源

2017-02-11 00:24:38

這就是交配！很簡單。我是100％我在某個時候嘗試過，但似乎事後設置屬性讓我感到困惑。 –

爲什麼不顯示SVG路徑？

回答

相關問題