CODEWITHSUNDEEP
javascriptsvg
and-k
and-k

Reputation: 607

Setting text SVG element dynamically via javascript

I am creating SVG elements via JavaScript, and it works fine, but when I create an text SVG element and define it's content, the browser just don't render the value, despite the value is in the code when I inspect it with firebug.

The code is:

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

Here is the jsfiddle link. If you inspect the SVG you will see the value of the text element there, but the browser doesn't render it.

Thanks

Upvotes: 34

Views: 59761

Answers (4)

wolf
wolf

Reputation: 9

You did a very simple mistake:

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

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); ^^^^ Hit the keyboard!

Upvotes: -2

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92377

I compress your code a little now it works

let txt='2';

wrapper.innerHTML=`
  <svg xlink="http://www.w3.org/1999/xlink" width="187" height="234">
    <rect width="187" height="234" fill="#fff" stroke="#000" 
          stroke-width="2" rx="7"></rect>
    <text x="10" y="20" fill="#000">${txt}</text>
  </svg>
`;
<div id=wrapper></div>

Upvotes: 0

Milind Morey
Milind Morey

Reputation: 2116

    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>

Upvotes: 12

cmonkey
cmonkey

Reputation: 4296

You're short an "h" in your namespace

Was

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

should be

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

Upvotes: 26

Related Questions