Question

我在svg图标中有两个path。我需要合并（联合）它们。以下是代码：Зелёный

我试过这样的js：

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

但它没有用。提前谢谢！

Answer 1

为什么它不起作用我还不能说，但可能是因为它是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是可行的方法。~~

Answer 2

您的代码运行正常。你最初尝试时一定是做错了。

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>

用js联合两个svg <path>

2 个答案: