Question

我的要求是从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>

Answer 1

如果您想更改文字，则不必删除整个元素并重新创建。您可以通过选择文本元素并将新内容设置为以下内容来更改textcontent：

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

请参阅此处的工作示例：

＆＃13;

<!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>

＆＃13;

Answer 2

创建SVG元素时必须使用createElementNS

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

FIDDLE

Answer 3

如果你在d3内工作，你可以做到 d3.select('#svgTextId').html(newHTML)。

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

3 个答案: