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

我有这个代码中的svg元素

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

我想在那个chartSVG中添加一个包含g标记的水印。

最佳答案

应该是使用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>

关于javascript - 在没有jquery的情况下将g标签添加到svg标签中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55395377/