30

JavaScript を介して SVG 要素を作成していますが、正常に動作しますが、テキスト SVG 要素を作成してそのコンテンツを定義すると、firebug で検査したときに値がコードに含まれているにもかかわらず、ブラウザーは値をレンダリングしません。

コードは次のとおりです。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('width','187');
svg.setAttribute('height','234');

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width','187');
rect.setAttribute('height','234');
rect.setAttribute('fill','#fff');
rect.setAttribute('stroke','#000');
rect.setAttribute('stroke-width','2');
rect.setAttribute('rx','7');

var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = '2';

svg.appendChild(rect);
svg.appendChild(text); 

var wp = document.getElementById('wrapper'); 
wp.appendChild(svg);

これがjsfiddleリンクです。SVG を検査すると、そこにテキスト要素の値が表示されますが、ブラウザーはそれをレンダリングしません。

ありがとう

4

4 に答える 4

22

名前空間の「h」が短い

だった

var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');

する必要があります

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
于 2013-02-07T18:26:21.257 に答える
10 
    function createText() {

  var newText = document.createElementNS(svgNS,"text");
  newText.setAttributeNS(null,"x",20);      
  newText.setAttributeNS(null,"y",100);   
  var textNode = document.createTextNode("milind morey");
  newText.appendChild(textNode);
  document.getElementById("firstGroup").appendChild(newText);
}

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">    
       <g id="firstGroup">

    <text x="20" y="45" onclick="createText();" font-size=+13px">Click on this text to create a new text.</text>

  </g>
       </svg>
于 2014-06-02T06:42:48.460 に答える