有没有办法使用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;"/>

这是一个jsFiddle,它适用于Firefox 4(需要一个HTML5解析器,因此你可以使用内联SVG).

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