0

I'm using JS to dynamically update a text node in an SVG. The code is working, but it is also creating a second, duplicate node.

I've gone through several answers and I haven't found an explanation as to why this code is creating a second text node.

Here is the code I have:

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); 
}

And here is a snippet of the 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>

Again, this code basically works, but I only want it to create/update a single text node. And bonus points if someone can also tell me how to contain/wrap the text string. I tried this but it didn't work. (I realize this may have to be a separate question)

shacker
  • 15
  • 4
  • You should probably write the code to get the specific node you want to remove (e.g., `s..querySelector('text')`), rather than depending on order/count of children. – Heretic Monkey May 13 '19 at 15:11
  • Boom. done. Worked like a charm. I changed it from the count to this: `var g = s.querySelector('text'); g.querySelector('tspan').remove();` – shacker May 13 '19 at 15:19

0 Answers0