使用JavaScript向SVG文档添加文本

Question

我正在尝试使用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>元素中，但值未设置。 有什么解决办法吗？

- zeacuss

Answer 1

我认为您需要创建一个文本节点来保存字符串，并将其附加到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/找到一个可行的例子。

- Bill

---

我已经验证过这是正确的。（使用createTextNode。）应该标记为答案。 - Marc Rochkind

Bill，你能否更新链接让它不再跳转到404页面。 - Shashank K

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

- Casey OConnor

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。同时，请尽量不要在代码中添加过多的解释性注释，因为这会降低代码和解释的可读性！ - Blue

请解释一下这个 Casey 是如何工作的，以及为什么我们需要 NS 和 null 值的一些信息。 - Andrew S

诀窍在于属性 innerHTML。有趣的是，此节点没有 innerText。 - Roland

Answer 3

此外，如果您想动态更新文本值，可以使用textContent属性。

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

- SridharKritha

---

实际上，没有必要显式地创建一个文本节点。在创建完SVG的text元素后，直接使用textContent来设置文本即可正常工作。参见https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent – “在节点上设置textContent会移除所有子节点，并用给定的字符串值替换它们，生成一个单独的文本节点。” - Otto G