5

I have this generic SVG Path, consisting of quadratic curves. I don't need to draw it, I don't even have an SVG element, just the string with points (well, I do have a full SVG file if it matters). All I need is one simple thing: to get coordinates of a point on this path by given percent or length or any other way. Path.pointAt() will work perfectly.

Question is: what is the easiest and best performance-wise way to do it? Am I to create an SVG element and work with it dynamically via JS? Will it affect overall performance if I have, like, 10-30 of these paths?
Maybe there are any known libraries providing just the math? If it matters, I'm working with PixiJS v4, and my target platform is, well, all of them: desktop browsers (incl IE11), iOS and Android devices.

gman
  • 100,619
  • 31
  • 269
  • 393
takopus
  • 61
  • 4
  • Why can't you use the curve formula? – Meir Jun 27 '18 at 13:16
  • I can. But my paths have a lot of these curves in them, so I would have to write my own library and do a lot of calculations. I actually have my own math for quadratic curves (converted from AS3 code), but trying to migrate to `SVG.Path` or some other lib: inventing a bicycle is not a proper way to do things in 2018. – takopus Jun 27 '18 at 14:38
  • [tag:paperjs] might be a good choice here, see for example [Path.getPointAt()](http://paperjs.org/reference/path/#getpointat-offset). – ccprog Jun 27 '18 at 15:02

0 Answers0