Question

我正在使用JS动态更新SVG中的文本节点。该代码正在运行，但它还在创建另一个重复的节点。

我已经回答了几个答案，但是没有找到关于为什么此代码创建第二个文本节点的解释。

这是我的代码：

function myFunctionId (id) {
    var s = document.getElementById('text-box');
    var g = s.childNodes[1];
    g.childNodes[1].remove();
    var txt = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    txt.setAttribute('x', '200');
    txt.setAttribute('y', '300');
    if(id=='bi'){
        var t = document.createTextNode("Brand Identity paragraph");}
    else if(id=='ld'){
        var t = document.createTextNode("Logo Design paragraph");}
    else{
        var t = '';
    }
    txt.style.fill = 'white';
    txt.appendChild(t);
    g.appendChild(txt); 
}

这是SVG的代码段：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="50 150 500 500" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<g id="text-box">
    <text>
        <tspan x="220" y="320" width="160"></tspan>
    </text>
</g>

<g id="bi" onclick="myFunctionId(this.id)">
    <g>
        <circle class="st2" cx="439.37" cy="269.73" r="45"/>
    </g>
    <text transform="matrix(1 0 0 1 410.1014 262.9455)"><tspan x="0" y="0" class="st3 st4 st5">Brand</tspan><tspan x="-9.08" y="26.12" class="st3 st4 st5">Identity</tspan></text>
</g>

<g id="ld" onclick="myFunctionId(this.id)">
    <circle class="st6" cx="474.7" cy="355.98" r="36.24"/>
    <text transform="matrix(1 0 0 1 454.0022 350.1072)"><tspan x="0" y="0" class="st3 st4 st7">Logo</tspan><tspan x="-8.32" y="22.61" class="st3 st4 st7">Design</tspan></text>
</g>
</svg>

同样，此代码基本上可以正常工作，但是我只希望它创建/更新单个文本节点。如果有人还可以告诉我如何包含/包装文本字符串，则可以加分。我尝试了this，但没有成功。（我意识到这可能是一个单独的问题）

使用javascript创建多个节点在SVG中创建文本节点

0 个答案: