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）。

如果您的路径是相对的，那么您将不得不在附加路径之间添加内容，以便第二个路径在正确的位置开始。

有没有办法使用Javascript合并两个路径元素（svg）？

1 个答案: