在没有jquery的情况下将g标签添加到svg标签

Question

我有这段代码中的svg元素

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

我想在该chartSVG中添加包含g标签的水印。

Answer 1

应该是使用createElementNS和appendChild()的基本DOM操作：

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>