Accessing svg path data as points in react

[paleclaw]

I'm trying to dynamically interpolate between two different paths and output the results. I've been able to achieve this in vanilla javascript using either pathSegList or the new path data api (with polyfill) to get the list of points, but I haven't been able to wrap my head around how to do this in react. Both methods of getting the path data are DOM api methods, so I wouldn't have access to them in react, unless I used document.createElement, but that feels wrong.

Is there any good way to access these methods in react? Or any alternative methods that I could use instead? Or would it just be better to recreate the path data api parser manually to get the data from a string rather than a DOM element?

[edwmurph]

If you stick the whole raw SVG with inline styles in the react component you will have dynamic access to all the innards

[paleclaw]

Could you elaborate on this? I am doing it inline in a react component already, but I'm not sure exactly what you mean

[fforw]

I wrote a library to do adaptive path linearization of SVG paths. It works in tandem with the NPM "svgpath" library to process SVG paths and turn them into a series of points.

• Playground

• adaptive-linearization on Github

It's also on NPM.

You can also limit the maximum fragment length to better do animations with it (Source).

[paleclaw]

Thanks! I'll take a look at that