SVG : how to merge multiple lines to obtain single object

Question

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

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

@Kaiido ya thats good point however with that other operations will not work like if i have to fill inside of square. so i think merge to single path is good instead of grouping as it will save some bandwidth too by resulting smaller file size — user889030, Jul 29 '21 at 06:11
Your question is a bit hard... Do you want a JS solution that would be able to generate any shape from any segments in any order and directions? That would be a heck of a work, and definitely too much for a single SO Q/A. Do you want only the `d` for these particular ones? That's super easy, but would you learn anything if we just gave it to you? The best would be for us to teach you how to do so, but it's so trivial that it's a bit hard to explain correctly... Maybe if you set one different stroke color per path you'd see better where you need to switch between the coord in M or in V/H? — Kaiido, Jul 29 '21 at 06:22
@Kaiido JS tag i just added because i mentioned getBBox() method in it , i will code the js algo for it , however i just needed direction of how to do it manually i learn to join lines and curves from this : https://stackoverflow.com/questions/42819350/how-to-combine-two-svg-paths-together-without-spaces but this approach not work on lines of my square. and ya i only want `d` but a bit explanation will be good. thanks — user889030, Jul 29 '21 at 06:45
Read more carefully the last sentence of my comment, I believe I gave you everything you need. Ok, one more hint: You need to make the full path draw in a common direction (clockwise or anti-clockwise), currently your paths are not fulfilling this condition, so you need to swap the entry coord of some with their exit coord. — Kaiido, Jul 29 '21 at 06:51
@Kaiido ok thanks i will work on it in light of your guidance — user889030, Jul 29 '21 at 08:31
either use a `rect` element https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect or construct the path similar to this: `M10 10 v20 h20 v-20 z`. Lower case gives relative movements. `z` draws the last line back to the starting point, closing the shape. For your example to work you would use `M129 192 V226 H159 V192 H129` -- the second absolute positions using the same values as those from the `M`ove command. — Ruskin, Jul 29 '21 at 10:57

score 3 · Accepted Answer · answered Jul 29 '21 at 14:34

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.

SVG : how to merge multiple lines to obtain single object

1 Answers1