Добавьте тег g в тег svg без jquery

Question

У меня есть элемент SVG из этого кода

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

Я хочу добавить водяной знак, содержащий тег g, в эту диаграмму SVG.

Answer 1

Должно быть базовым манипулированием DOM с использованием createElementNS и 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>

Или, если у вас есть SVG-контент в виде строки, вы можете использовать DOMParser() и импортировать фрагмент:

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>