javascript - 将两个SVG <路径>与JS联合

svg图标中有两个path。我需要合并（联合）它们。这是代码：https://jsfiddle.net/rspo9knu/

我像这样尝试了js：

var Path1 = document.getElementById("Path1");
var Path2 = document.getElementById("Path2");
Path1.setAttribute('d', Path1.getAttribute('d') + ' ' + Path2.getAttribute('d'));
Path2.parentNode.removeChild(Path2);

但是没有用。提前致谢！

最佳答案

为什么它不起作用我还不能确定，但​​是可能是因为它是XML而不是HTML，所以这里提供了一个可行的解决方案，它创建了一个新的SVG元素：

请参见createElementNS函数上的NS，并提供元素的名称空间。

https://jsfiddle.net/rspo9knu/1/

...
let svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
let path = document.createElementNS("http://www.w3.org/2000/svg","path");
path.setAttribute('d', Path1.getAttribute('d') + Path2.getAttribute('d'));
svg.setAttribute("width","13px");
svg.setAttribute("height", "16px");
svg.setAttribute("viewBox","0 0 13 16");
svg.appendChild(path);

更新：

在小提琴上（https://jsfiddle.net/rspo9knu/4/）

“更好”的解决方案，而无需创建新的元素：

let Path1 = document.getElementById("Path1");
let Path2 = document.getElementById("Path2");

let s = document.createElementNS("http://www.w3.org/2000/svg","svg");
let path = document.createElementNS("http://www.w3.org/2000/svg","path");
Path1.setAttribute('d',Path1.getAttribute('d') + " " + Path2.getAttribute('d'));
Path2.remove();

  看来，要检索XML节点，必须使用函数getElementsByTagName。