Creating text nodes in SVG with javascript creating multiple nodes

164
May 13, 2019, at 10:30 PM

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)

Rent Charter Buses Company
READ ALSO
Property &#39;props&#39; does not work in userscript (for khanacademy)

Property 'props' does not work in userscript (for khanacademy)

I don't know if this question is against the rules, so I'll understand if it gets deleted or if I receive a punishment

151
Why does flow complain if I put the checking into a variable?

Why does flow complain if I put the checking into a variable?

I wanna use a variable for the validation of an ArraySo I did this:

199
How to register angular element in vue.js app?

How to register angular element in vue.js app?

I want to use an angular component in a vuejs app, so I built the angular component via ng build --prod --output-hashing none, to only have one file to include in my vue app I used

217
Simplest method for enabling the pipeline operator in Vue single file component templates

Simplest method for enabling the pipeline operator in Vue single file component templates

What's the simplest method for enabling the pipeline operator in Vue single file component templates?

159