添加SVG文本的div容器內

Question

對不起，這個問題可能是一個經典的問題，但我嘗試調試以下JS（我與SVG處理初學者）：

script to debug

在第一時間，我想創建一個可以放置文本的SVG元素。我按照上this link

下面這個例子中我做了什麼：

HTML：

<div id="containerCanvas"> 
</div> 

JAVASCRIPT：

var svgNS = "http://www.w3.org/2000/svg"; 
var x=1; 
var y=2; 
var newText = document.createElementNS(svgNS,"text"); 
newText.setAttributeNS(null,"x",x);  
newText.setAttributeNS(null,"y",y); 
newText.setAttributeNS(null,"font-size","20","fill","red"); 
newText.innerHTML = "Need help"; 
document.getElementById("containerCanvas").appendChild(newText); 

CSS：

#containerCanvas{ 
position: relative; 
top: 0; 
left: 0; 
margin: 20px; 
} 

Unfort統一，沒有什麼會出現在jsfiddle的結果窗口中（我期望文本「需要幫助」font-size = 20和red color）。

任何人都可以看到有什麼問題嗎？

Answer 1

左看右看之後，當前正在生成的HTML是：

<text x="1" y="2" font-size="20">Need help</text> 

但是它應該由SVG標籤包圍，即：

<svg height="200" width="200"> 
    <text x="1" y="2" font-size="20" fill="black">Need help</text> 
</svg> 

更新的js

var svgNS = "http://www.w3.org/2000/svg"; 
var x=30; 
var y=20; 

var svgEl = document.createElementNS(svgNS,"svg"); 
svgEl.setAttributeNS(null,"height",200); 
svgEl.setAttributeNS(null,"width",200); 
var newText = document.createElementNS(svgNS,"text"); 
newText.setAttributeNS(null,"x",x);  
newText.setAttributeNS(null,"y",y); 
newText.setAttributeNS(null,"font-size","20"); 
newText.setAttributeNS(null,"fill","red"); 
newText.innerHTML = "Need help"; 

svgEl.appendChild(newText); 
document.getElementById("containerCanvas").appendChild(svgEl); 

希望它有幫助... https://jsfiddle.net/v4zhLgmL/20/