在javascript中将文本添加到SVG文档 [英] adding Text to SVG document in javascript

问题描述

我正在尝试使用javascript
向SVG文档中的< g> 元素添加文本元素我的代码如下所示

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

但是当我运行它时，文本不会显示。
该元素被添加到< 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??

推荐答案

我认为您需要创建一个文本节点来保存字符串并将其附加到SVG文本元素。

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

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

这篇关于在javascript中将文本添加到SVG文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！