Question

100

adding Text to SVG document in javascript

rated 0 times [ 102] [ 2] / answers: 1 / hits: 49019 / 13 Years ago, tue, february 14, 2012, 12:00:00

I'm trying to add a text element to the <g> element in a SVG document using javascript
my code looks like this

function addText(x,y,val){

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

    $newtxt = $(newtxt);

    $newtxt.attr('x',x);

    $newtxt.attr('y',y);

    $newtxt.attr('font-size','100');

    $newtxt.val(val);

    $newtxt.appendTo($('g'));

}

but when I run it the text is not shown.
the element is added to the <g> element, but the value is not set..
any ideas how to solve this??

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

frederickmohamedw

Add To Favorites

Follow

Total Points: 21

Total Questions: 123

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

frederickmohamedw questions

1 React JS. How can I display the image inside the object?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 Vuetify data table :item-class doesn't do anything

Sat, Jul 18, 20, 00:00, 4 Years ago

1 How to show modal on component/page created/load in Vue.js

Sun, Apr 26, 20, 00:00, 4 Years ago

1 File type from buffer using file-type

Sat, Jan 11, 20, 00:00, 4 Years ago

1 Slick Slider Mobile Responsiveness

Fri, Dec 27, 19, 00:00, 4 Years ago

View All

answered 13 Years ago jaydon · Accepted Answer

I think you need to create a text node to hold the string and append that to the SVG text element.

var svgNS = http://www.w3.org/2000/svg;

var newText = document.createElementNS(svgNS,text);

newText.setAttributeNS(null,x,x);     

newText.setAttributeNS(null,y,y); 

newText.setAttributeNS(null,font-size,100);



var textNode = document.createTextNode(val);

newText.appendChild(textNode);

document.getElementById(g).appendChild(newText);

There's a working example at http://old.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/.