在 javascript 中向 SVG 文档添加文本

Question

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??

Answer 1

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/ .

Answer 2

var txt = document.createElementNS(svgNS, 'text');
txt.setAttributeNS(null, 'x', x);
txt.setAttributeNS(null, 'y', y);
txt.setAttributeNS(null,'font-size','100');
txt.innerHTML = val;
document.getElementById("g").appendChild(txt);

Answer 3

Additionally, if you want to update the text value dynamically then you could use textContent property.

const textNS = document.createElementNS("http://www.w3.org/2000/svg","text");
const textNode = document.createTextNode("Old Value");
textNS.appendChild(textNode);
document.body.appendChild(textNS);

textNS.textContent = "New Value";