在線編輯的一個東西，用的是js+svg，遇到了這樣一個問題，就是說我監聽頁面的單擊事件，然后記錄下來鼠標單擊的位置，給svg添加子標簽，然后頁面上展示出來
說的可能不大清楚，上代碼吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG</title> </head> <body> <svg width="800px" height="400px" id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M261,242L164,177"></path> </svg> <script> var sum = 1; var startPoint; var endPoint; document.addEventListener('click', (e) => { // console.log(e.clientX, e.clientY); if (sum === 1){ startPoint = "M"+ e.clientX + ','+ e.clientY; sum += 1; }else{ endPoint = 'L' + e.clientX + ','+ e.clientY; let changeEle = document.createElement('path'); changeEle.setAttribute('d', startPoint + endPoint); document.getElementById('svg').appendChild(changeEle); console.log(document.getElementById('svg')); startPoint = 'M' + e.clientX + ','+ e.clientY; } }) </script> </body> </html>
里面的第一個標簽是原來就有的，然后我appendChild下面的標簽，但是頁面上並沒有展示，把第一個標簽注釋第二個也沒有顯出來，到底是什么原因
問題已經解決：
SVG是基於xml格式的，創建標簽節點需要有命名空間
把createElement改成createElementNS就可以了
let changeEle = document.createElementNS("http://www.w3.org/2000/svg", 'path');