SVG.Array

Is for simple, whitespace separated value strings:

'0.343 0.669 0.119 0 0 0.249 -0.626 0.13 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0'

Can also be passed like this in a more manageable format:

new SVG.Array([ .343,  .669, .119, 0,   0
              , .249, -.626, .130, 0,   0
              , .172,  .334, .111, 0,   0
              , .000,  .000, .000, 1,  -0 ])

at()

returns new instance

This method will morph the array to a given position between 0 and 1. Continuing with the previous example:

array.at(0.27).toString() //-> returns '27,0 73,100 127,127'

bbox()

returns object

Gets the bounding box of the geometry of the array:

array.bbox()

Note: this method is only available on SVG.PointArray and SVG.PathArray.

clone()

returns new instance

Makes a clone of the array and returns it:

var array = new SVG.Array()
var clone = array.clone()

Note: This method performs a deep clone on multi-dimensional arrays like SVG.PointArray and SVG.PathArray.
Note 2: Obviously, the returned array is of the same class as the cloned array (e.g. SVG.Array, SVG.PointArray or SVG.PathArray).

morph()

returns itself

In order to animate array values the morph() method lets you pass a destination value. This can be either the string value, a plain array or an instance of the same type of SVG.js array:

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.morph('100,0 0,100 200,200')

This method will prepare the array ensuring both the source and destination arrays have the same length.

Note: In order to morph paths with different lengths, you need to include the svg.pathmorphing.js plugin.

move()

returns itself

Moves geometry of the array with the given x and y values:

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.move(33,75)
array.toString() //-> returns '33,75 133,175'

Note: this method is only available on SVG.PointArray and SVG.PathArray

reverse()

returns itself

Reverses the order of the array:

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.reverse()
array.toString() //-> returns '100,100 0,0'

settle()

returns itself

When morphing is done the settle() method will eliminate any transitional points like duplicates:

array.settle()

size()

returns itself

Resizes geometry of the array by the given width and height values:

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.move(100,100).size(222,333)
array.toString() //-> returns '100,100 322,433'

Note: this method is only available on SVG.PointArray and SVG.PathArray

SVG.PointArray

inherits from SVG.Array

Is a bit more complex and is used for polyline and polygon elements. This is a poly-point string:

'0,0 100,100'
// or
'0 0 100 100'
// or
'0, 0, 100, 100'

The flat array representation:

[0, 0, 100, 100]

The multi-dimensional array representation:

[
  [0, 0]
, [100, 100]
]

Precompiling it as an SVG.PointArray:

new SVG.PointArray([
  [0, 0]
, [100, 100]
])

Note that every instance of SVG.Polyline and SVG.Polygon carries a reference to the SVG.PointArray instance:

polygon.array() //-> returns the SVG.PointArray instance

SVG.PathArray

inherits from SVG.Array

Path arrays carry arrays representing every segment in a path string:

'M0 0L100 100z'

The flat array representation:

[ 'M', 0, 0, 'L', 100, 100, 'z' ]

The multi-dimensional array representation:

[
  ['M', 0, 0]
, ['L', 100, 100]
, ['z']
]

Precompiling it as an SVG.PathArray:

new SVG.PathArray([
  ['M', 0, 0]
, ['L', 100, 100]
, ['z']
])

Note that every instance of SVG.Path carries a reference to the SVG.PathArray instance:

path.array() //-> returns the SVG.PathArray instance

Syntax

The syntax for patharrays is very predictable. They are basically literal representations in the form of two dimentional arrays.

Move To

Original syntax is M0 0 or m0 0. The SVG.js syntax ['M',0,0] or ['m',0,0].

Line To

Original syntax is L100 100 or l100 100. The SVG.js syntax ['L',100,100] or ['l',100,100].

Horizontal line

Original syntax is H200 or h200. The SVG.js syntax ['H',200] or ['h',200].

Vertical line

Original syntax is V300 or v300. The SVG.js syntax ['V',300] or ['v',300].

Bezier curve

Original syntax is C20 20 40 20 50 10 or c20 20 40 20 50 10. The SVG.js syntax ['C',20,20,40,20,50,10] or ['c',20,20,40,20,50,10].

Or mirrored with S:

Original syntax is S40 20 50 10 or s40 20 50 10. The SVG.js syntax ['S',40,20,50,10] or ['s',40,20,50,10].

Or quadratic with Q:

Original syntax is Q20 20 50 10 or q20 20 50 10. The SVG.js syntax ['Q',20,20,50,10] or ['q',20,20,50,10].

Or a complete shortcut with T:

Original syntax is T50 10 or t50 10. The SVG.js syntax ['T',50,10] or ['t',50,10].

Arc

Original syntax is A 30 50 0 0 1 162 163 or a 30 50 0 0 1 162 163. The SVG.js syntax ['A',30,50,0,0,1,162,163] or ['a',30,50,0,0,1,162,163].

Close

Original syntax is Z or z. The SVG.js syntax ['Z'] or ['z'].

The best documentation on paths can be found at MDN.

Fork me on GitHub