An array of point objects with x and y properties. [{x:0, y:100}, {x:200, y:400}].
MorphSVGPlugin.pathDataToBezier()
MorphSVGPlugin.pathDataToBezier( path:*, vars:Object ) : Array
Converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween.
Parameters
path: *
The SVG path that should be converted. Can be a reference to an SVG <path>, a string selector ("#myPath") or raw path data ("M238.17,151.6c0,21.1-18.9, ...")
vars: Object
A config object containing optional properties that affect how the Bezier points are plotted.
Show More
Returns : Array
Details
Converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween.
Watch the video
Selecting the path to be converted
//select path via string selector
var bezier = MorphSVGPlugin.pathDataToBezier("#myPath");
//or select path using DOM reference
var myPath = document.getElementById("myPath");
MorphSVGPlugin.pathDataToBezier(myPath);
//or pass in a path string
MorphSVGPlugin.pathDataToBezier("M37,17v15H14V17H37z M50,0H0v50h50V0z");
Adjusting points
The optional vars object recognizes a few properties that can adjust all the resulting points in the Bezier array:
//each x value will be offset by 100 and each y by 200
MorphSVGPlugin.pathDataToBezier(myPath, {offsetX:100, offsetY:200});
//each value will be adjusted so that the #balloon element will be moved to the path
MorphSVGPlugin.pathDataToBezier(myPath, {align:"#balloon"});
//each point will use relative values which makes it easy to "move the path" to an SVG element.
MorphSVGPlugin.pathDataToBezier(myPath, {align:"relative"});
//resulting path will have points like "{x:"+=0", y:"+=200"}
//transform the path using a matrix (rotate 45 degrees and move to right by 200px)
MorphSVGPlugin.pathDataToBezier(myPath, {matrix:[0.7071, 0.7071, -0.7071, 0.7071, 200, 0]});
Don't forget to always set type:"cubic" on your bezier tween, like:
TweenLite.to("#id", 3, {bezier:{values:MorphSVGPlugin.pathDataToBezier("#path", {align:"#id"}), type:"cubic"}});
Demo
See the Pen pathDataToBezier() docs official by GreenSock (@GreenSock) on CodePen.