CODEWITHSUNDEEP
javascriptsvg
user889030
user889030

Reputation: 4754

SVG : how to merge multiple lines to obtain single object

i have square shape made of 4 lines and as these are 4 different paths so am not able to get size of the shape for that am trying to merge these lines together so that i have square shape as single path and then i can get its size using getBBox() method :

square shape

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 -237.4911 302.46116 237.4911">
 <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 -1 0 0)">
 
  <path  d= "M129.734598 192.711157V226.160594" stroke="red"  stroke-width=".56693" id="1"/>
  <path  d= "M129.734598 192.711157H159.496439" stroke="red"  stroke-width=".56693" id="2"/>
  <path  d= "M159.496439 192.711157V226.160594" stroke="red"  stroke-width=".56693" id="3"/>
  <path  d= "M129.734598 226.160594H159.496439" stroke="red"  stroke-width=".56693" id="4"/>
 
 </g>
</svg>

so i try to merged them which is partially ok like this

M129.734598 192.711157 V226.160594 H159.496439 V226.160594 H159.496439

enter image description here

so any idea how to properly do it to get square shape as single path

Upvotes: 0

Views: 781

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Hint 1

Your first path

M 129.734598 192.711157 V 226.160594

is equivalent to

M 129.734598 192.711157 L 129.734598 226.160594

Your second path

M 129.734598 192.711157 H 159.496439

is equivalent to

M 129.734598 192.711157 L 159.496439 192.711157

Perhaps in this form, the sequence of moves might be more obvious.

Hint 2

In your first attempt you were close (I've rounded these values for more clarity)

M 129 192 V 226 H 159 V 226 H 159

Your last two path commands are not doing anything.

In order to complete the square, your third side (the second V) needs to return to the start Y position. And your fourth side (the second H) needs to return to the start X position.

Hope this helps, and is not too cryptic.

Upvotes: 3

Related Questions