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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4282108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 11:42:49  来源:igfitidea点击:

how to change svg text tag using javascript innerHTML

javascriptsvgraphael

提问by zjm1126

i was using raphaeljs , and i want to show html(not only text) in svg,

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

so i use this code :

所以我使用这个代码:

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

but i cant change the svg's content , so i console it in firebug ,

但我无法更改 svg 的内容,所以我在 firebug 中对其进行了控制台,

console.log(t.node)

it show this :

它显示了这一点:

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

so how to change the text using javscript on svg

那么如何在 svg 上使用 javscript 更改文本

thanks

谢谢

回答by Zecc

SVG nodes don't have a innerHTML property (they're not HTML).

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

Use textContent instead: t.node.textContent='dddd'

使用 textContent 代替: t.node.textContent='dddd'

回答by Emre Basala

if the code for the svg text is like this:

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

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

if you are using JQuery try this:

如果您使用的是 JQuery,请尝试以下操作:

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

回答by contactmatt

I was able to accomplish this by setting the textContent property of the <text>element. Makes it a lot easier if you know the ID of the element.

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

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