benoit Posted December 21, 2019 Share Posted December 21, 2019 Hi, For a project, I use GSAP and I need to convert a SVG path to opentype curve. I made a custom Snag.svg (remove animation function) to convert Arcto to Curveto, but maybe there is a something like in GSAP ? http://snapsvg.io/docs/#Snap.path.toCubic Link to comment Share on other sites More sharing options...
GreenSock Posted December 21, 2019 Share Posted December 21, 2019 Sure, you could use MorphSVGPlugin's stringToRawPath() method to convert a path data string into a RawPath (which is always cubic bezier based) and rawPathToString() to convert that back into a path data string. Like: var pathData = "M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100"; // any valid path data, not limited to cubic beziers var rawPath = MorphSVGPlugin.stringToRawPath(pathData); var cubicPathData = MorphSVGPlugin.rawPathToString(rawPath); Is that what you're looking for? 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 21, 2019 Share Posted December 21, 2019 Note that MotionPathPlugin also has these methods. 1 Link to comment Share on other sites More sharing options...
benoit Posted December 21, 2019 Author Share Posted December 21, 2019 Great ! Link to comment Share on other sites More sharing options...
benoit Posted January 15, 2020 Author Share Posted January 15, 2020 Hi, Any shortcut to reduce precision ? Like C51.13333,85.23333… -> C51.13,85.23 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2020 Share Posted January 15, 2020 @benoit GSAP doesn't have anything like that built in. Tools like SVGOMG have this feature as part of their minification process (it's called "Round/rewrite numbers" on there). You should be using something like SVGOMG to reduce the file size of your SVGs anyway. Alternatively you could use regex to truncate the numbers or regex + JS to round them quite easily. 1 Link to comment Share on other sites More sharing options...
benoit Posted January 15, 2020 Author Share Posted January 15, 2020 I know, I love and I use but doing a SVGOMG then a stringToPath and stringToRawPath make my path longer… Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 15, 2020 Share Posted January 15, 2020 I see. You could use regex to shorten/round them like the edit to my previous post said. 1 Link to comment Share on other sites More sharing options...
benoit Posted January 16, 2020 Author Share Posted January 16, 2020 '5.7777 1.33 8.333333333'.replace(/(?<=\.\d\d)\d+/g,'') Like this 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now