Jump to content
GreenSock

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

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

An array of point objects with x and y properties. [{x:0, y:100}, {x:200, y:400}].

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.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×