js動態新增svg

js動態新增svg

今天在做一個基於bpmnjs的專案時候，想在任務節點內部的<text>標籤對中新增一個<tspan>顯示出來，即給任務節點新增名字。

剛開始時是用jQuery找到text,然後直接append，加入自己要加的內容進去
但是發現雖然加進去了，但是在頁面部分不顯示，糾結好久，試了許多方法，最後終於發現錯誤。

**我是在svg標籤裡面加內容展示，但是卻在內部加的是html的標籤對，所以導致不顯示。
建立svg節點時，要使用createElementNS函式並傳入節點名稱的名稱空間。**

var mysvg = document.getElementById("id");  
        var rectObj = document.createElementNS("http://www.w3.org/2000/svg","tspan");  
        if(rectObj){  
            rectObj.setAttribute("x",43);  
            rectObj.setAttribute("y",43);   
            mysvg.appendChild(rectObj);  
            }

今天是部落格從部落格園搬過來的第一天，記錄一下。