Add g tag into svg tag without jquery

Question

I have svg element from this code

let chartSVG = ReactDOM.findDOMNode(this.refChart).children[0];

I want to add a watermark contain g tag into that chartSVG.

Answer 1

Should be basic DOM manipulation using createElementNS and appendChild() :

 const xmlns = "http://www.w3.org/2000/svg"; const rect = document.createElementNS(xmlns, 'rect'); rect.setAttributeNS (null, "width", 50); rect.setAttributeNS (null, "height", 50); const g = document.createElementNS(xmlns, 'g'); g.appendChild(rect); const svg = document.getElementById('svg'); svg.appendChild(g);

 <svg id="svg"></svg>

Or, if you have your SVG content as a string, you can use a DOMParser() and import the fragment:

 const g = new DOMParser().parseFromString( '<g xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50"/></g>', 'application/xml'); const svg = document.getElementById('svg'); svg.appendChild(svg.ownerDocument.importNode(g.documentElement, true));

 <svg id="svg"></svg>