如何使用javascript动态更改html中svg的文本内容

How to dynamically change the text content of svg in html with javascript

我的要求是从g和另一个文本元素中删除文本元素。
但是，当我运行此代码时，写入的文本会被完美删除，但不会显示添加新的文本标签。当我打开Chrome的开发人员部分时，它显示了我添加的text标记，但未在视图中显示。当我从chrome的开发人员部分更新任何内容时，DOM将再次重新加载，并且新文本将显示在视图中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>

var s = document.getElementById('t');
var g = s.childNodes[1];
console.log(g.childNodes[1].remove());//remove text must in my case
var txt = document.createElement('text');
txt.setAttribute('x', '10');
txt.setAttribute('y', '10');
var t = document.createTextNode("This is a paragraph.");
txt.appendChild(t);
g.appendChild(txt);

</body>
</html>

相关讨论

如果要更改文本，则不必删除整个元素并重新创建它。您可以通过选择text元素并为其设置新内容来简单地更改textcontent，如下所示：

1	document.getElementById('t').childNodes[1].childNodes[1].innerHTML="This is a paragraph";

在此处查看工作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>

document.getElementById('t').childNodes[1].childNodes[1].innerHTML="This is a paragraph";//remove text must in my case

</body>
</html>

创建SVG元素时必须使用createElementNS

1	document.createElementNS('http://www.w3.org/2000/svg', 'text');

FIDDLE