Union two svg <path> with js

Question

I have two path in the svg icon. I need to merge (union) them. Here is the code: https://jsfiddle.net/rspo9knu/

I tried js like this:

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

but it didn't work. Thanks in advance!

Answer 1

Your code is working just fine. You must have been doing something wrong when you tried originally.

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

<?xml version="1.0" encoding="UTF-8"?>
<svg width="130px" height="160px" viewBox="0 0 13 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
    <title>delete copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="OpenSans" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="13-v2-kit-elements-checkboxes-primary" transform="translate(-436.000000, -6266.000000)" fill="#C5CFDE">
            <g id="server-list" transform="translate(50.000000, 5963.000000)">
                <g id="Hover-Copy" transform="translate(0.000000, 262.000000)">
                    <g id="ServerItem-Hover">
                        <g id="Delete-icon" transform="translate(365.000000, 2.000000)">
                            <g id="delete-copy-10" transform="translate(21.000000, 39.000000)">
                                <path d="M10.9369634,2.3033125 C12.0673293,2.3033125 12.987,3.2096875 12.987,4.32378125 L12.987,5.9918125 C12.987,6.26340625 12.7635268,6.483625 12.4879902,6.483625 L11.7893512,6.483625 L11.7893512,15.5081875 C11.7893512,15.7797812 11.565878,16 11.2903415,16 L1.70965854,16 C1.43409024,16 1.21064878,15.77975 1.21064878,15.5081875 L1.21064878,6.483625 L0.512009756,6.483625 C0.236441463,6.483625 0.013,6.263375 0.013,5.9918125 L0.013,4.32378125 C0.013,3.20971875 0.932639024,2.3033125 2.06303659,2.3033125 L3.30640732,2.3033125 L3.30640732,0.4918125 C3.30640732,0.22021875 3.52988049,0 3.80541707,0 L9.19464634,0 C9.47021463,0 9.6936561,0.22025 9.6936561,0.4918125 L9.6936561,2.795125 C9.6936561,3.06671875 9.47021463,3.2869375 9.19464634,3.2869375 C8.91907805,3.2869375 8.69563659,3.0666875 8.69563659,2.795125 L8.69563659,0.983625 L4.30442683,0.983625 L4.30442683,2.3033125 L7.24851463,2.3033125 C7.52408293,2.3033125 7.74752439,2.52353125 7.74752439,2.795125 C7.74752439,3.06671875 7.52405122,3.2869375 7.24851463,3.2869375 L2.06306829,3.2869375 C1.48298293,3.2869375 1.01101951,3.75209375 1.01101951,4.3238125 L1.01101951,5.5000625 L1.70965854,5.5000625 L11.2903415,5.5000625 L11.9890122,5.5000625 L11.9890122,4.3238125 C11.9890122,3.75209375 11.5170488,3.2869375 10.9369634,3.2869375 C10.6613951,3.2869375 10.4379537,3.06671875 10.4379537,2.795125 C10.4379537,2.52353125 10.6614268,2.3033125 10.9369634,2.3033125 Z M10.7913317,15.0164063 L10.7913634,15.0164063 L10.7913634,6.483625 L2.20866829,6.483625 L2.20866829,15.0164063 L10.7913317,15.0164063 Z" id="Path1"></path>
                                <path d="M4.09233659,12.9180312 C3.8168,12.9180312 3.59332683,12.6978125 3.59332683,12.4262187 L3.59332683,9.2786875 C3.59332683,9.007125 3.81676829,8.786875 4.09233659,8.786875 C4.36790488,8.786875 4.59134634,9.00709375 4.59134634,9.2786875 L4.59134634,12.4262187 C4.59131463,12.6977812 4.36787317,12.9180312 4.09233659,12.9180312 Z M6.5,12.9180312 C6.22446341,12.9180312 6.00099024,12.6978125 6.00099024,12.4262187 L6.00099024,9.2786875 C6.00099024,9.007125 6.22443171,8.786875 6.5,8.786875 C6.77553659,8.786875 6.99900976,9.00709375 6.99900976,9.2786875 L6.99900976,12.4262187 C6.99900976,12.6977812 6.77553659,12.9180312 6.5,12.9180312 Z M8.90766341,12.9180312 C8.63212683,12.9180312 8.40865366,12.6978125 8.40865366,12.4262187 L8.40865366,9.2786875 C8.40865366,9.007125 8.63209512,8.786875 8.90766341,8.786875 C9.18323171,8.786875 9.40667317,9.00709375 9.40667317,9.2786875 L9.40667317,12.4262187 C9.40667317,12.6977812 9.18323171,12.9180312 8.90766341,12.9180312 Z" id="Path2"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Answer 2

Why it doesn't work I can't say just yet, but probably because it is XML and not HTML, here ist a working solution, creating a new SVG element:

see the NS on the createElementNS function, giving the namespace of the element.

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);

UPDATE:

here on fiddle(https://jsfiddle.net/rspo9knu/4/)

The "better" solution, without creating a new Element:

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();

It seems that for retrieving XML nodes the function getElementsByTagName is the way to go.