如何使用javascript动态更改html中svg的文本内容
Posted
技术标签:
【中文标题】如何使用javascript动态更改html中svg的文本内容【英文标题】：How to dynamically change the text content of svg in html with javascript 【发布时间】：2015-09-22 15:57:59 【问题描述】：我的要求是从g 和另一个文本元素中删除文本元素。
但是当我运行这段代码时，写入的文本被完美地删除，但没有显示添加新的文本标签。当我打开 Chrome 的开发人员部分时，它会显示我添加的 text 标签，但它没有显示在视图中。当我从 chrome 的开发人员部分更新任何内容时，DOM 会再次重新加载，我的新文本将显示在视图中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
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);
</script>
</body>
</html>
【问题讨论】：
您的问题还有问题吗？还是其中一个答案帮助您解决了这个问题？ 现在解决了。谢谢 如果其中一个答案解决了您的问题，请accept it like described here。如果您自己解决了问题，请将您的解决方案作为答案发布。 【参考方案1】：如果您想更改文本，您不必删除整个元素并重新创建它。您可以通过选择文本元素并为其设置新内容来简单地更改文本内容，如下所示：
document.getElementById('t').childNodes[1].childNodes[1].innerHTML= "This is a paragraph";
在此处查看工作示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
document.getElementById('t').childNodes[1].childNodes[1].innerHTML= "This is a paragraph";//remove text must in my case
</script>
</body>
</html>【讨论】：
【参考方案2】：创建 SVG 元素时必须使用 createElementNS
document.createElementNS('http://www.w3.org/2000/svg', 'text');
FIDDLE
【讨论】：
先生，您能解释一下我如何使用 foreignObject 代替您动态创建的文本标签吗？在那个 foriegnObject 中，我必须使用文本标签。 foreignObject 和 text 标签都是动态创建的。【参考方案3】：如果你在 d3 中工作，你可以简单地做
d3.select('#svgTextId').html(newHTML).
【讨论】：
以上是关于如何使用javascript动态更改html中svg的文本内容的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性
Oracle APEX：如何更改交互式网格中开关列的值（使用动态操作 - JavaScript）？