rveciana / svg-path-properties

Pure Javascript alternative to path.getPointAtLength(t) and getTotalLength() functions. Works with Canvas & Node
MIT License
256 stars 22 forks source link

Doesn't work with arcs? #5

Closed veltman closed 7 years ago

veltman commented 7 years ago

This seems to have some issues with SVG arcs. For example:

<svg width="100" height="100">
  <path d="M0,0 A50,50,0,0,0,100,0Z" fill="blue" />
</svg>

makes a basic half circle.

But this can't seem to parse its length:

https://runkit.com/590ff00e90d6f10011380a19/592e1c385b3c9b00122c9fa5

Any idea why that would be?

rveciana commented 7 years ago

It should work! I'll try to reproduce the bug and solve it. Thank you

veltman commented 7 years ago

Looking at the code it looks like the parser doesn't actually handle the A or a case at all:

https://github.com/rveciana/svg-path-properties/blob/master/src/path-properties.js#L10-L126

If I have a chance I'll try to work on this and submit a PR.

rveciana commented 7 years ago

You are right. I was looking it now. And the A and a cases are not trivial! The arc length of an ellipse is not easy to calculate...

2017-05-31 16:57 GMT+02:00 Noah Veltman notifications@github.com:

Looking at the code it looks like the parser doesn't actually handle the A or a case at all:

https://github.com/rveciana/svg-path-properties/blob/ master/src/path-properties.js#L10-L126

If I have a chance I'll try to work on this and submit a PR.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/rveciana/svg-path-properties/issues/5#issuecomment-305213296, or mute the thread https://github.com/notifications/unsubscribe-auth/ACs59Ypxi5wtwmSvDMzyucjbCve-C1xQks5r_X_agaJpZM4NrDFv .

veltman commented 7 years ago

I suspect some sort of decomposition into bezier curves like https://github.com/fontello/svgpath/blob/master/lib/a2c.js will be necessary.

rveciana commented 7 years ago

It seems a good approach, and the function works! Thank you.

rveciana commented 7 years ago

I think that the new version I uploaded is working ok. Thank you for the report and the help! I finally used the project you suggested.

veltman commented 7 years ago

Seems to work pretty well, thanks for getting it in there so fast! Great library, I'm using it as a Node fallback for this project: https://github.com/veltman/flubber