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

Question

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

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).

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