Есть ли способ объединить два элемента пути (svg) с помощью Javascript?

Я нарисовал две линии пути, используя SVG, и я сохранил эти элементы в двух переменных в моем javascript-коде: "Line1" и "Line2", и мне нужно объединить две строки в один элемент пути. Есть ли способ сделать это?

Ответы

Ответ 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).

Если ваши пути являются относительными, вам нужно будет добавить что-то между добавленными путями, чтобы второй запускался в нужном месте.