Alright Guys, I have a little challenge / question for you.
I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use.
So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I’d want either
an array of all the x/y values of all the anchor and control points like
[0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179]
or an array of point objects (which ultimately would get passed to BezierPlugin)
[{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}]
The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween.
This video explains all this in glorious detail:
Does raphael, or snapSVG or any other library offer a convenient conversion method?
It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right?
I’m not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do
convertPath(dPath) { … //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints \= convertPath(“M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93”);
Any help is greatly appreciated.
Carl
p.s: This mission was greatly inspired by Chris Gannon’s DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I’d like to publicly thank Rodrigo for helping me get a good leap into Raphael.
https://greensock.com/forums/topic/10688-challenge-convert-svg-path-to-bezier-anchor-and-control-points/