web-dev-qa-db-ja.com

JavaScriptでSVGドキュメントにテキストを追加する

JavaScriptを使用してSVGドキュメントの<g>要素にテキスト要素を追加しようとしています。コードは次のようになります。

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>要素に追加されますが、値は設定されていません。これを解決する方法はありますか？

javascriptjquerysvg
16
zeacuss

文字列を保持するテキストノードを作成し、それをSVGテキスト要素に追加する必要があると思います。

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

http://old.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/ に実用的な例があります。

46
Bill
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);
3
Casey OConnor