Set

returns SVG.Set

Sets are very useful if you want to modify or animate multiple elements at once. A set will accept all the same methods accessible on individual elements, even the ones that you add with your own plugins! Creating a set is exactly as you would expect:

// create some elements
var rect = draw.rect(100,100)
var circle = draw.circle(100).move(100,100).fill('#f09')

// create a set and add the elements
var set = draw.set()
set.add(rect).add(circle)

// change the fill of all elements in the set at once
set.fill('#ff0')

A single element can be a member of many sets. Sets also don't have a structural representation, in fact they are just fancy array's.

add()

returns itself

Add an element to a set:

set.add(rect)

Quite a useful feature of sets is the ability to accept multiple elements at once:

set.add(rect, circle)

animate()

returns SVG.SetFX

Sets work with animations as well:

set.animate(3000).fill('#ff0')

bbox()

returns SVG.BBox

Get the bounding box of all elements in the set:

set.bbox()

clear()

returns itself

Or to remove all elements from a set:

set.clear()

each()

returns itself

Iterating over all members in a set is the same as with svg containers:

set.each(function(i) {
  this.attr('id', 'shiny_new_id_' + i)
})

Note that this refers to the current child element.

first()

returns SVG.Element

Gets the first element:

set.first()

get()

returns SVG.Element

Gets the element at a given index:

set.get(1)

has()

returns boolean

Determine if an element is member of the set:

set.has(rect)

index()

returns number

Returns the index of a given element in the set.

set.index(rect) //-> -1 if element is not a member

last()

returns SVG.Element

Gets the last element:

set.last()

remove()

returns itself

To remove an element from a set:

set.remove(rect)
Fork me on GitHub