3

Is there a way to take a Javascript Path2D object and convert it to its corresponding SVG String? According to the docs, it's pretty easy to convert string to Path using the constructor, but I can't seem to find a way to do the inverse.

The context (if relevant) is that I have a Path2D object that I want to use as a clip-path style on an element. So, if there is a way to set the style property using a Path2D object, that would be good enough for me!

zashu
  • 747
  • 1
  • 7
  • 22
  • Can you paste your starting path? – Dave Pritlove Dec 11 '22 at 21:51
  • Thank you for the link - agreed that the linked answer applies here as well! Sounds like the best option is to use some sort of wrapper that can maintain the path parts – zashu Dec 11 '22 at 23:31
  • Ideally the person who closed this message would have left a comment as you may not find that link as helpful as it first looks. There is no `.toSVGString()` method (as the linked answer explains, it is a proposal but I don't think it is yet adopted). You might find however that you can retrieve a path string using `path.toPathData()`. The reason I earlier asked for your example was that I was keen to experiment as I'm not sure that will work either. Also, it is not difficult to build an svg path from scratch after inspecting the path data. Good luck. – Dave Pritlove Dec 11 '22 at 23:37
  • @DavePritlove both questions are exact duplicate. The answer there (mine) explains clearly that there is nothing to get the data of a Path2D object, not even `toPathData` that you got from I don't know where. From my perspective the best option is to use [the script I wrote](https://github.com/Kaiido/path2D-inspection) which does extend the `Path2D` interface with a `toSVGString()` method. If you think tou can provide a better alternative, you're invited to do so on the other question. – Kaiido Dec 11 '22 at 23:48
  • @Kaiido I've nothing to argue about with you, nor did I claim `toPathData` (which I have seen more frequently than `toSVGString()`) would work. Had the OP posted his example I may well have been able to provide a better alternative or may have failed. A comment explaining closure is generally useful, if only as a pointer to the OP to try discussing his particular issue on the alternative Q when they find that answer does not help them. – Dave Pritlove Dec 11 '22 at 23:58
  • @DavePritlove - In this case, it's a little tricky to give the original path due to the fact that it's being generated - I have code that is tracing low-res raster data and converting it to a path. This generally works by creating a bunch of Path2D segments (using `moveTo`, `lineTo`, and `closePath`). Those segments are all mashed together into a single path using `addPath` calls. Lastly, the path uses `setTransform` to apply it to a higher-res canvas in various ways. I could make a toy example if that would help. – zashu Dec 12 '22 at 17:36
  • @zashu it sounds like that path would be too complicated to manually extract coordinates and build an equivalent svg path. I think for simple paths it would be possible but can't really suggest anything helpful. Good luck – Dave Pritlove Dec 12 '22 at 21:56

0 Answers0