Javascript SVG<g> 标签</g>

Question

What I am trying to do: insert an svg into a inner most g tag

What I have done so far:

    let svg = document.querySelector('svg');
    let g = svg.getElementsByClassName('srd-default-link');

    let shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    shape.id = 'circle';
    shape.setAttribute('cx', 25);
    shape.setAttribute('cy', 25);
    shape.setAttribute('r', 20);
    shape.setAttribute('style', 'fill: green');

     g[0].appendChild(shape);
}

The result: only able to insert it in the first layer g tag and not the inner most g tag

Answer 1

In your source code there are two main problems:

1. You use the same id value many times. According to HTML documentation the id is used as unique identificator for an element.
2. You are "attaching" the circle to <svg> and not to <g> tag with the svg.appendChild(shape);

You can do something similar to:

var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //create <svg>
var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); //create <g>
g.classList.add("myClass");
svgElem.appendChild(g); //append <g> inside <svg>

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); //create <circle>
g.appendChild(circle); //append <circle> inside <g>

var g_2 = document.createElementNS("http://www.w3.org/2000/svg", "g"); //create another <g>
g_2.classList.add("myClass");
svgElem.appendChild(g_2); //append <g> inside <svg>


var coll = svgElem.getElementsByClassName("myClass"); //coll contains HTMLCollection

/* You cannot use coll.appendChild(circle);*/

coll[0].appendChild(circle); //append <circle> to the first <g> returned by getElementsByClassName("myClass");

Answer 2

I found out the reason why it did not work. I put a if condition,

if (g.length !== 0) g[0].appendChild(shape);

and I put it in componentDidUpdate at the first line. Thanks @Wolfetto for helping in the initial part. I will leave it here for anyone who needs it in the future.

if (g.length !== 0) {
        for (let i = 0; i < g[0].childNodes.length; i++) {
            let item = g[0].childNodes[i];
            if (item.nodeName === 'g') item.appendChild(shape);
        }
    }

This is the code that append the shape into the inner most g tag of the svg element. I welcome any suggestion to improve code if any.