Добавление текста в документ SVG в javascript

Я пытаюсь добавить текстовый элемент в элемент <g> в документе SVG с помощью javascript мой код выглядит следующим образом

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

но когда я его запускаю, текст не отображается. элемент добавляется к элементу <g>, но значение не задано. любые идеи, как решить эту проблему?

Ответ 1

Мне кажется, вам нужно создать текст node, чтобы сохранить строку и добавить ее в текстовый элемент 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);

Здесь есть рабочий пример http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/.

Ответ 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);