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

【问题标题】：How to dynamically change the text content of svg in html with javascript如何使用javascript动态更改html中svg的文本内容
【发布时间】：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。如果您自己解决了问题，请将您的解决方案作为答案发布。

标签： javascript svg

【解决方案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).

【讨论】：