SVG.js

Container Elements

SVG.Container

The SVG.Container class is the base wrapper for all elements that can contain other elements.

The inheritance stack is: SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element > SVG.Container.


SVG.Svg

The main SVG.js initializer function creates a root svg node in the given element and returns an instance of SVG.Svg.

SVG() constructor

returns SVG.Svg which inherits from SVG.Container

var draw = SVG().addTo('#drawing')



Note: The first time SVG() is called, a second, invisible <svg> will be created. This is our parser as explained in the FAQ.



An SVG document can also be created inside another SVG document. It is then called a nested SVG document:

nested() constructor

constructor on SVG.Container
returns SVG.Svg which inherits from SVG.Container

var nested = draw.nested()

var rect = nested.rect(200, 200)

svg.isRoot()

Tests if this <svg> element is the root svg. Note, that this will return false, when the element is a direct child of a document-fragment. However, it will return true if the element is completely detached from the dom.

svg.namespace()

Adds the required svg namespaces to the svg element. This is automatically done on creation. However, if you don't want those, you can use removeNamespaces() to get rid of them.

svg.removeNamespace()

Removes the svg namespaces from the svg element.


SVG.G

Grouping elements can be useful if you want to transform a set of elements as if it were one. All element within a group, maintain their position relative to the group they belong to.

Note: Groups do not have a geometry of their own, it's inherited from their content. Therefore groups do not listen to x, y, width and height attributes. If that is what you are looking for, use a nested() svg instead.

group() constructor

constructor on SVG.Container
returns SVG.G which inherits from SVG.Container

A group has all the same element methods as the root SVG document:

var group = draw.group()
group.path('M10,20L30,40')

Existing elements from the SVG document can also be added to a group:

group.add(rect)


SVG.Symbol

constructor on SVG.Container
returns SVG.Symbol which inherits from SVG.Container

Not unlike the group element, the symbol element is a container element. The only difference between symbols and groups is that symbols are not rendered. Therefore a symbol element is ideal in combination with the use element:

var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')

var use = draw.use(symbol).move(200, 200)


SVG.Defs

The <defs> element is a container for referenced elements. Descendants of a <defs> node are not rendered directly. The <defs> node lives in the main <svg> document and can be accessed with the defs() method.

defs() constructor

constructor on SVG.Container
returns SVG.Defs which inherits from SVG.Container

var defs = draw.defs()

The defs are also available on any other element through the root() method:

var defs = rect.root().defs()

The defs node works exactly the same as groups.


SVG.A

Create a hyperlink that will be activated on all child elements.

constructor on SVG.Container
returns SVG.A which inherits from SVG.Container

A hyperlink or <a> tag creates a container that enables a link on all children:

var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)

The link url can be updated with the to() method:

link.to('http://apple.com')

Furthermore, the link element has a target() method to create the target attribute:

link.target('_blank')

element.linkTo()

Elements can also be linked the other way around with the linkTo() method:

rect.linkTo('http://svgdotjs.github.io/')

Alternatively, a block can be passed instead of a URL for more options on the link element:

rect.linkTo(function(link) {
  link.to('http://svgdotjs.github.io/').target('_blank')
})

Removes the link from an element by deleting the <a> tag:

rect.unlink()

element.linker()

Returns the <a> element or null if this element is not a link:

rect.linker() // returns the link


SVG.Fragment

A Fragment is a wrapper around a document-fragment. Albeit it is not part of the Container class, it still has all methods to construct elements on it.
Therefore you can easily populate a fragment with the svg elements of your needs and append them all in one go to the dom:

const frag = new Fragment()
frag.rect(100, 100)
frag.circle(100, 100)

draw.add(frag) // will add rect and circle

SVG.Fragment extends SVG.Dom directly and therefore supports all basic dom operations as well as import and export of svg elements:

const frag = new Fragment()
frag.rect(100, 100)
frag.circle(100, 100)
frag.first() // rect
frag.last() // rect

frag.svg() // <rect ... /><circle ... />
Fork me on GitHub