添加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/