Document Tree

add()

returns itself

Sets the calling element as the parent node of the argument. Returns the parent:

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

group.add(rect) //-> returns group

addTo()

returns itself

Sets the calling element as a child node of the argument. Returns the child:

rect.addTo(group) //-> returns rect

clone()

returns SVG.Element

To make an exact copy of an element the clone() method comes in handy:

var clone = rect.clone()

This will create a new, unlinked copy. For making a linked clone, see the use element.
By default, the cloned element is placed directly after the original element.
When you pass a parent parameter to the clone() function it will append the cloned element to the given parent.

put()

returns SVG.Element

Sets the calling element as the parent node of the argument. Returns the child:

group.put(rect) //-> returns rect

putIn()

returns SVG.Element

Sets the calling element as a child node of the argument. Returns the parent:

rect.putIn(group) //-> returns group

remove()

returns itself

Removes the calling element from the svg document:

rect.remove()

replace()

returns SVG.Element

At the calling element's position in the svg document, replace the calling element with the element passed to the method.

rect.replace(draw.circle(100))

toDoc()

returns itself

Same as toParent() but with the root-node as parent

toParent()

returns itself

Moves an element to a different parent (similar to addTo), but without changing its visual representation. All transformations are merged and applied to the element.

rect.toParent(group) // looks the same as before

ungroup() / flatten()

returns itself

Break up a group/container and move all the elements to a given parent node without changing their visual representations. The result is a flat svg structure, e.g. for exporting.

Ungroup all elements in this group recursively and places them into the given parent

group.ungroup(parent, depth)
// (default: parent container of the calling element)

Call it on the whole document to get a flat svg structure:

drawing.ungroup()

Break up the group and places all elements in the drawing:

group.ungroup(drawing)

Break up all groups until it reaches a depth of 3:

drawing.ungroup(null, 3)

Flat and export svg:

var svgString = drawing.ungroup().svg()
Fork me on GitHub