如何使用 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

我可以通过设置 <text> 元素的 textContent 属性来实现这一点。如果您知道元素的 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");