SVGのテキストが表示されません

Question

JavaScriptを使用してsvg要素にテキストを追加しようとしています。それは完璧に動作し、

var svg=document.getElementById("svgtext"); 
var newText = document.createElementNS(svg,"text"); 
newText.setAttributeNS(null,"x",0);  
newText.setAttributeNS(null,"y",50); 
newText.setAttributeNS(null,"font-size","100"); 
newText.setAttributeNS(null,"fill","black"); 
var textNode = document.createTextNode("Hello World"); 
newText.appendChild(textNode); 
document.getElementById("gText").appendChild(newText); 

と私は手動でいくつかのテキストを追加した場合、あなたが見ることができるように、これはHTML

  <svg id="svgtext" width=160px height=250px> 
       <g id="gText"> 
        <text x="0" y="15" fill="black">SVG!</text> 
       </g> 
     </svg> 

です：

は、ここに私のjavascriptのコードです。 javascriptで試してみると、Chromeのインスペクタツールに表示されていますが、画面には表示されません。

Answer 1

誤った値をcreateElementNSの最初の引数に渡しています。 D：

var newText = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
 
newText.setAttributeNS(null,"x",0);  
 
newText.setAttributeNS(null,"y",50); 
 
newText.setAttributeNS(null,"font-size","100"); 
 
newText.setAttributeNS(null,"fill","black"); 
 
var textNode = document.createTextNode("Hello World"); 
 
newText.appendChild(textNode); 
 
document.getElementById("gText").appendChild(newText);

  <svg id="svgtext" width="160px" height="250px"> 
 
       <g id="gText"> 
 
        <text x="0" y="15" fill="black">SVG!</text> 
 
       </g> 
 
     </svg>