Find corners in SVG path

Question

I need to break a path made only of straight segments into an array of corner points.

My input looks for example like this:

M447,390h-24l26.77686,-18.11376c0.40304,3.41283 0.66687,6.74013 0.77624,9.94164z  

or graphically like this:

I managed to convert the d attribute into a series of commands with parse-svg-path resulting in this:

[ 
  ["M", 447, 390],
  ["h", -24],
  ["l", 26.77686, -18.11376],
  ["c", 0.40304, 3.41283, 0.66687, 6.74013, 0.77624, 9.94164],
  ["z"]
]

How should I go about converting this to a series of 4 corner points coordinates?

Answer 1

You may convert this ["M", 447, 390] to {x:447,y:390}

You may convert this ["h", -24] to {x:447-24,y:390} .

Explanation: h is an horizontal line. Since the command is lowercase the coordinates are relatives to the previous point and since it's an horizontal line the y coordinate is the same as the last point's y

You may convert this ["l", 26.77686, -18.11376] to {x:447-24+26.77686,y:390-18.11376} Explanation: l is a line and since the command is lowercase the coordinates are relatives to the previous point

this: ["c", 0.40304, 3.41283, 0.66687, 6.74013, 0.77624, 9.94164] is a cubic Bézier but if you need just a point you can take the last 2 digits and the point is: {x:447-24+26.77686+0.77624,y:390-18.11376+9.94164} Exactly as before c is a lowercase command and the coordinates are relatives to the previous point

this ["z"] tells you that the path is closed and you can use again the first point {x:447,y:390}

And this is is an example where I use those points to draw small circles:

 <svg viewBox="421 371 31 20" width="300"> <path d="M447,390h-24l26.77686,-18.11376c0.40304,3.41283 0.66687,6.74013 0.77624,9.94164z" /> <circle fill="red" cx="447" cy="390" r=".5" /> <circle fill="red" cx="423" cy="390" r=".5" /> <circle fill="red" cx="449.77686" cy="371.88624" r=".5" /> <circle fill="red" cx="450.5531" cy="381.82788" r=".5" /> </svg>