Pomax / svg-path-reverse

This is a JavaScript SVG path to "something" converter, turning a path into hookable graphics instructions for arbitrary conversion
59 stars 15 forks source link

Correctly reverse paths with multiple sub paths #14

Closed Eschon closed 1 year ago

Eschon commented 1 year ago

I have a path

M36.592 228.917c-4.993-3.212-3.363-4.536-2.398-5.23 3.304-2.376 7.08-5.227 13.149-8.595 1.776-.986 4.037-.781 6.239-.543 5.658.612 4.348 2.899 10.847 5.413 2.351.91 23.499 1.06 34.135 4.311 7.789 2.382 27.368-1.502 40.242 2.793 5.359 1.788 47.585 2.343 54.693 2.343m146.545 16.202c.399 0 8.987.441 11.103 1.463 10.898 5.262 26.624 1.55 32.851 8.862 1.418 1.665 28.967 3.34 33.239 5.024 1.391.548 8.463 2.049 12.298 4.79 2.956 2.111 7.366 3.404 10.294 3.404

which consists of 2 sub paths. It looks like this (green marks start, red marks end)

Screenshot 2023-02-07 at 09 11 22

Reversing this reverses both subpaths but keeps them in the old order which produces this:

Screenshot 2023-02-07 at 09 13 08

Now the end of subpath 1 is the new beginning of the path and the beginning of subpath 2 is the new end.

Reversing the order of the paths fixes this:

Screenshot 2023-02-07 at 09 16 33

I've tested this throughout our application and written a test that checks if the original end point is the new start point and vice versa.

Pomax commented 1 year ago

Hah, nice catch! in it goes.

Pomax commented 1 year ago

v1.7.0 published to npm