Referencing

By id

returns SVG.Element (or the most relevant subclass of SVG.Element)

If you want to get an element created by SVG.js by its id, you can use the SVG.get() method:

var element = SVG.get('my_element')

element.fill('#f06')

Using CSS selectors

returns SVG.Set

There are two ways to select elements using CSS selectors.

The first is to search globally. This will search in all svg elements in a document and return them in an instance of SVG.Set:

var elements = SVG.select('rect.my-class').fill('#f06')

The second is to search within a parent element:

var elements = group.select('rect.my-class').fill('#f06')

Using jQuery or Zepto

Another way is to use jQuery or Zepto. Here is an example:

// add elements
var draw   = SVG('drawing')
var group  = draw.group().addClass('my-group')
var rect   = group.rect(100,100).addClass('my-element')
var circle = group.circle(100).addClass('my-element').move(100, 100)

// get elements in group
var elements = $('#drawing g.my-group .my-element').each(function() {
  this.instance.animate().fill('#f09')
})


Circular reference

Every element instance within SVG.js has a reference to the actual node:

node

returns node

element.node

native()

returns node

The same can be achieved with the native() method:

element.native()

instance

returns element

Similarly, the node carries a reference to the SVG.js instance:

node.instance


Child references

children()

returns array

An array of all children can be retrieved with the children method:

draw.children()

clear()

returns itself

To remove all elements from a parent element:

draw.clear()

each()

returns itself

The each() allows you to iterate over the all children of a parent element:

draw.each(function(i, children) {
  this.fill({ color: '#f06' })
})

Deep traversing is also possible by passing true as the second argument:

// draw.each(block, deep)
draw.each(function(i, children) {
  this.fill({ color: '#f06' })
}, true)

Note: this refers to the current child element.

first()

returns SVG.Element

To get the first child of a parent element:

draw.first()

get()

returns SVG.Element

Get an element on a given position in the children array:

var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

draw.get(0) //-> returns rect
draw.get(1) //-> returns circle

has()

returns boolean

Checking the existence of an element within a parent:

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.has(rect)  //-> returns true
group.has(rect) //-> returns false

index()

returns number

Returns the index of given element and returns -1 when it is not a child:

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.index(rect)  //-> returns 0
group.index(rect) //-> returns -1

last()

returns SVG.Element

To get the last child of a parent element:

draw.last()


Parent references

Every element has a reference to its parent with the parent() method:

doc()

returns SVG.Doc

For retrieving the root SVG you can use doc()

var draw = SVG('drawing')
var rect = draw.rect(100, 100)

rect.doc() //-> returns draw

parent() within the svg document

returns SVG.Element

element.parent()

Alternatively a class or css selector can be passed as the first argument:

var draw   = SVG('drawing')
var nested = draw.nested().addClass('test')
var group  = nested.group()
var rect   = group.rect(100, 100)

rect.parent()           //-> returns group
rect.parent(SVG.Doc)    //-> returns draw
rect.parent(SVG.Nested) //-> returns nested
rect.parent(SVG.G)      //-> returns group
rect.parent('.test')    //-> returns nested

parent() on the topmost svg document

returns HTMLNode

var draw = SVG('drawing')

draw.parent() //-> returns the wrappig html element with id 'drawing'

parents()

returns array

To get all ancestors of the element filtered by type or CSS selector (see parent() method)

var group1 = draw.group().addClass('test')
  , group2 = group1.group()
  , rect   = group2.rect(100,100)

rect.parents()        // returns [group1, group2, draw]
rect.parents('.test') // returns [group1]
rect.parents(SVG.G)   // returns [group1, group2]


URI references

In cases where an element is linked to another element through an attribute, the linked element instance can be fetched with the reference() method.

reference()

The only thing required is the attribute name:

use.reference('href') //-> returns used element instance
// or
rect.reference('fill') //-> returns gradient or pattern instance for example
// or
circle.reference('clip-path') //-> returns clip instance
Fork me on GitHub