javascript - 有没有办法使用 Javascript 合并两个路径元素 (svg)？

Question

我使用 SVG 绘制了两条路径线，并将这些元素保存到我的 javascript 代码中的两个变量中:“Line1”和“Line2”，我需要将这两条线合并为一个路径元素。有办法吗？

Answer 1

你的路径是相对定义的(小写字母)还是绝对定义的(大写字母)？如果是绝对路径，连接两条路径很简单，只需附加 d 属性的值即可。如果您有两条这样的路径:

<path id="Line1" d="M50,50
         A30,30 0 0,1 35,20
         L100,100"
      style="stroke:#660000; fill:none;"/>
<path id="Line2" d="M110,110
         L100,0"
      style="stroke:#660000; fill:none;"/>

然后这段 JavaScript 代码:

var Line1 = document.getElementById("Line1");
var Line2 = document.getElementById("Line2");
//Add paths together
Line1.setAttribute('d', Line1.getAttribute('d') + ' ' + Line2.getAttribute('d'));
//Remove unnecessary second path
Line2.parentNode.removeChild(Line2);

会导致你有一个像这样的单一路径:

<path id="Line1" d="M50,50
         A30,30 0 0,1 35,20
         L100,100 M110,110
         L100,0"
      style="stroke:#660000; fill:none;"/>

Here's a jsFiddle ，它适用于 Firefox 4(需要 HTML5 解析器，以便您可以拥有内联 SVG)。

如果你的路径是相对的，那么你将不得不在附加路径之间添加一些东西，以便第二个路径从正确的位置开始。