如何使用javascript innerHTML更改svg文本标记

Question

我正在使用raphaeljs,我想在svg中显示html(不仅是文本),

所以我使用这段代码:

var r = Raphael("holder", 200, 300);
var t = r.text(10, 10, "ssdwqdwq");
t.node.innerHTML='dddd'

但我不能改变svg的内容,所以我在firebug中安装它,

console.log(t.node)

它显示了这个:

<text x="10" y="13.5" text-anchor="middle" style="font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000">

所以如何在svg上使用javscript更改文本

谢谢

Answer 1

SVG节点没有innerHTML属性(它们不是HTML).

请改用textContent: t.node.textContent='dddd'

Answer 2

我能够通过设置元素的 textContent 属性来实现这一点<text>。如果您知道元素的 ID，这将变得容易得多。

document.getElementById("id-of-text-el").textContent = "My Value";

Answer 3

如果 svg 文本的代码是这样的：

<text id="id-of-the-text"> old value</text>

如果您使用的是 JQuery，请尝试以下操作：

$("#id-of-the-text").text("new-value");