Setting text SVG element dynamically via javascript

Question

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

User failed to show "research effort". Upvotting as this is the perfect reference for "how to add dynamic textto a svg image?" kudos ;) — bruno
– bruno, Commented Feb 13, 2019 at 23:28

cmonkey · Accepted Answer · 2013-02-07 18:26:21Z

26

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

answered Feb 7, 2013 at 18:26

cmonkey

4,2961 gold badge28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

and-k Over a year ago

Yeah! That's right! I have readed that code countless times, but I hadn't noticesd that. Thank you very mutch

SachaDee · Accepted Answer · 2017-04-21 21:53:01Z

12

    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>

edited Apr 21, 2017 at 21:53

SachaDee

9,6833 gold badges27 silver badges36 bronze badges

answered Jun 2, 2014 at 6:42

Milind Morey

2,12419 silver badges15 bronze badges

1 Comment

SuperUberDuper Over a year ago

is this still the best way?

Kamil Kiełczewski · Accepted Answer · 2019-05-21 14:02:42Z

0

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>

edited May 21, 2019 at 14:02

answered May 21, 2019 at 13:57

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

wolf · Accepted Answer · 2020-05-13 20:05:00Z

-2

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!

answered May 13, 2020 at 20:05

wolf

9

1 Comment

GKFX Over a year ago

Hello and welcome to StackOverflow! This question has already been answered and the typo noticed. There is no need to submit duplicate answers.

Collectives™ on Stack Overflow

Setting text SVG element dynamically via javascript

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related