Jump to content
GreenSock

mickFli

SVG Raw Path Data vs. MorphSVGPlugin.pathDataToRawBezier

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Call it try before you by, I guess, but I'm trying to understand the dramatic difference between what `MorphSVGPlugin.pathDataToRawBezier` returns, vs. the original raw SVG path data. To produce the cape wave effect, I've noticed the "MorphSVGPlugin from GreenSock" pen applies a rotation to the points of the bezier array, originally created like this: 

 bezier = MorphSVGPlugin.pathDataToRawBezier(e.getAttribute("d"))[0]

However, my pen indicates a dramatic difference between the original points of an SVG path, and the result of calling `MorphSVGPlugin.pathDataToRawBezier`. They are obviously not the same, I'm sure for good reason, but my curiosity is getting the best of me.  What is the relationship between the two?

 

 

 

See the Pen zvXjyN by dotComb (@dotComb) on CodePen

Link to comment
Share on other sites

I think the main problem is that you were using lowercase "m" and "c" commands when recomposing the SVG data string in your example. There's a big difference between lowercase and uppercase when it comes to SVG - lowercase interprets the values as relative whereas uppercase interprets them as absolute.

 

The pathDataToRawBezier() method just takes the path data and converts it into an array of pure absolute numbers that are ALL based on cubic Beziers. It's actually an array of arrays (each sub-array represents a segment of the Bezier, so if there is more than one "M" command, you'll get more than one sub-array). It's a really nice function to have when you want to do advanced stuff, as you saw with the cape flowing effect. :)

 

Does that answer your question? 

  • Like 3
Link to comment
Share on other sites

Pffft.  Can't believe it was that simple.  Thanks for pointing out the difference between m and M, c and C.  This statement is actually very helpful as well:

 

It's actually an array of arrays (each sub-array represents a segment of the Bezier, so if there is more than one "M" command, you'll get more than one sub-array).

 

 

Awesome!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×