Path

returns SVG.Path which inherits from SVG.Shape

The path string is similar to the polygon string but much more complex in order to support curves:

draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

For more details on path data strings, please refer to the SVG documentation on path data.

array()

returns SVG.PathArray

References the SVG.PathArray instance. This method is rather intended for internal use:

path.array()

length()

returns number

Get the total length of a path element:

var length = path.length()

pointAt()

returns object

Get point on a path at given length:

var point = path.pointAt(105) //-> returns { x : 96.88497924804688, y : 58.062747955322266 }

plot()

returns itself
animate yes

Paths can be updated using the plot() method:

path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')

The plot() method can also be animated:

path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)

There is only basic support for animating paths baked into SVG.js, which means that only paths with the same commands (M,C,S etc.) are animateable.

If you need to animate paths that do not share the same commands in order, you can use svg.pathmorphing.js

Fork me on GitHub