thêm chữ vào tài liệu SVG trong javascript

Question

Tôi đang cố gắng để thêm một yếu tố văn bản đến các yếu tố <g> trong một tài liệu SVG sử dụng javascript mã của tôi trông như thế này

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

nhưng khi tôi chạy nó văn bản là không được hiển thị. phần tử được thêm vào phần tử <g>, nhưng giá trị không được đặt .. bất kỳ ý tưởng nào để giải quyết vấn đề này ??

Answer 1

Tôi nghĩ bạn cần tạo một nút văn bản để giữ chuỗi và nối thêm vào phần tử văn bản 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); 

Có ví dụ làm việc tại http://www.carto.net/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);