Jump to content
GreenSock

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

MorphSVGPlugin.stringToRawPath()

Added in version: 0.9.0
MorphSVGPlugin.stringToRawPath( data:String ) : Array (RawPath)

Takes a string of path data (like "M0,0 C100,20 300,50 400,0...", what's typically found in the d attribute of a <path>), parses it, converts it into cubic beziers, and returns it as a RawPath which is just an array containing an array for each segment (each "M" command starts a new segment).

Parameters

data: String

A path data string which is what is typically found in the d attribute of a <path> element. Like "M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100"

Details

Takes a string of path data (like "M0,0 C100,20 300,50 400,0...", what's typically found in the d attribute of a <path>), parses it, converts it into cubic beziers, and then returns it as a RawPath.

A RawPath is basically an array containing an array for each contiguous segment, always populated with cubic bezier data. There's one segment (array) for each "M" command; All of the cubic bezier coordinates are in alternating x/y format (just like SVG path data) in numeric form which is nice because that way you don't have to parse a long string and convert things. For example, this SVG <path> has two separate segments because there are two "M" commands:

<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" />
So the resulting RawPath would be:
[
  [0, 0, 10, 20, 15, 30, 5, 18],
  [0, 100, 50, 120, 80, 110, 100, 100]
]

There is also a corresponding MorphSVGPlugin.rawPathToString() method that allows you to convert things back again.

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