Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
benoit

SVG path function

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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? 

  • Like 2

Share this post


Link to post
Share on other sites

Note that MotionPathPlugin also has these methods.

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

 

Any shortcut to reduce precision ? Like
 

C51.13333,85.23333 -> C51.13,85.23 

 

Share this post


Link to post
Share on other sites

@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.

  • Like 1

Share this post


Link to post
Share on other sites

I know, I love and I use but doing a SVGOMG then a stringToPath and stringToRawPath make my path longer… 

Share this post


Link to post
Share on other sites

I see. You could use regex to shorten/round them like the edit to my previous post said.

  • Like 1

Share this post


Link to post
Share on other sites
'5.7777 1.33 8.333333333'.replace(/(?<=\.\d\d)\d+/g,'')

Like this :)

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×