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.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')

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')
})
Fork me on GitHub