Home :: DOM :: Path Data

  1. Introduction
  2. Use
    1. Loading PathData into Your SVG Document
    2. Using PathSegments
    3. Converting a Path Node's data to PathSegment Objects
    4. Appending a PathSegment to a PathData Object
    5. Finding All PathSegments of a Certain Type
    6. Applying PathSegment changes to the path node
  3. Examples
  4. Download

Introduction

PathData is a group of JavaScript objects that can be used to manipulate <path> data. PathData is really rough right now, but you may find it useful in its present form.

Use

Loading PathData into Your SVG document

In order to use PathData in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if pathData.js is in the same directory as your SVG document, then you would include PathData with the following text:

<script xlink:href="pathData.js" />

Using PathSegments

PathSegments are objects that represent all of the commands used in a path element. All PathSegments have a command property. This is the letter abbreviation used to represent this command in a path element. The remaining properties depend on the command itself. If you view the SVG specification, you will see names used to define the parameters of each segment command. Each PathSegment will have properties following those same names. The only exceptions occur when the spec uses hypens in the name. I remove the hypen and then capitalize the letter following the hypen.

For example, a curveto PathSegment would have the following properties:

pathSegment.x1;
pathSegment.y1;
pathSegment.x2;
pathSegment.y2;
pathSegment.x;
pathSegment.y;

However, an arc would have following properties:

pathSegment.rx;
pathSegment.ry;
pathSegment.xAxisRotation;
pathSegment.largeArcFlag;
pathSegment.sweepFlag;
pathSegment.x;
pathSegment.y;

Converting a Path Element's data to PathSegment Objects

To convert a path node's d attribute to a series of PathSegment Objects, you will need to pass the path node to the loadDataFrom() method:

pd = new PathData();
path_node = SVGDoc.getElementById("some_path_id_here");
pd.loadDataFrom(path_node);

Appending a PathSegment to a PathData Object

You can add PathSegments to a PathData object by passing two parameters to the appendSegment() method. The first parameter is the Path Segment Command (for example, "M" or "L", etc.). The second parameter is an anonymous array of all of the data to be passed to the command. For instance, a bezier curvto command is denoted by the letter "C" and it expects six number parameters. The following example will append a bezier curve to a PathData object:

pd.appendSegment("C", [0,100, 100,100, 100,0]);

Finding all PathSegments of a Certain Type

You can find all PathSegments of a given type using the getSegmentsByCommandName() method. The following example will return an array of all lineto PathSegments:

segment_array = pd.getSegmentsByCommandName("L");

You may now manipulate any of the properites of each PathSegment in the array.

Applying PathSegment changes to the Path node

Once you have completed your alterations to the PathData object and its PathSegments, you can update the PathData's associated path node (the same node used in the loadDataFrom() method) by using the applySegments() method:

pd.applySegments();

Examples

Apply gravity to all M and L PathSegment: gravity.svg

Whirl PathSegments: whirl.svg

Jumble a Burst and watch it oscillate back into shape: splat.svg

Use custom tags to design you path data. Click on the path image or "View Source" to see the custom tags (Adobe SVG Viewer 3.0 only): custom_tags.svg

Download

pathData.js