在div容器内添加SVG文本

Question

Sorry, this question may be a classical issue but I try to debug the following JS (I am a beginner with SVG handling) :

script to debug

In a first time, I would like to create a SVG element in which I could put a text. I have followed this example on this link

Here what I have done :

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;
}

Unfortunately, nothing appears into result window on jsfiddle (I expect the text "Need help" with font-size = 20 and red color ).

Anyone could see what's wrong ?

Answer 1

After taking a closer look, the html that is currently being generated is:

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

However it should be enclosed by an svg tag, ie:

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

Updated 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);

Hope it helps... https://jsfiddle.net/v4zhLgmL/20/