Other Elements

General Handling of svg.js elements

Creating SVG Elements

In svg.js every element is an object which can be either created by constructing it:

import { Rect } from "@svgdotjs/svg.js"
var rect = new Rect().size(100, 100).addTo(draw)
// or to reuse an existing node
var rect = new Rect(node).size(100, 100)

or by using a constructor method on a container:

var rect = draw.rect(100, 100)

While the last example appends the constructed element directly to the container, it has to be done manually in the former example (addTo).
Constructing bare svg.js objects is therefore for fine control and most often not needed.

Creating SVG Elements with Attributes

svg.js allows to change attributes either through the attr() method or by calling specialized methods like move(). However, it is often easier to pass in attributes directly on construction:

var rect = new Rect({width: 100, height: 100}).addTo(draw)
// or
var rect = draw.rect({width: 100, height: 100})

This is a shorthand for calling attr() after construction.

SVG.Dom

SVG.Dom is the base prototype for all dom elements created by svg.js. It offers simple dom functionality like attr() and is usuable with HTML elements.
For all elements that are not described by SVG.js, the SVG.Dom class come in handy, too.

element() constructor

returns SVG.Dom

The SVG.Dom class can be instantiated with the element() method on any element:

var element = draw.element('title')

The string value passed as the first argument is the node name that should be generated.

element.words()

returns itself

The SVG.Dom instance carries an additional method to add plain text:

var element = draw.element('title').words('This is a title.')
//-> <title>This is a title.</title>

SVG.Rect

rect() constructor

constructor on SVG.Container
returns SVG.Rect which inherits from SVG.Shape

Rects have two arguments, their width and height:

var rect = draw.rect(100, 100)

rect.radius()

returns itself
animate yes

Rects can also have rounded corners:

rect.radius(10)

This will set the rx and ry attributes to 10. To set rx and ry individually:

rect.radius(10, 20)

SVG.Circle

circle() constructor

constructor on SVG.Container
returns SVG.Circle which inherits from SVG.Shape

The only argument necessary for a circle is the diameter:

var circle = draw.circle(100)

circle.radius()

returns itself
animate yes

circle.radius(75)

SVG.Ellipse

ellipse() constructor

constructor on SVG.Container
returns SVG.Circle which inherits from SVG.Shape

Ellipses have two arguments, their width and height:

var ellipse = draw.ellipse(200, 100)

ellipse.radius()

returns itself
animate yes

Ellipses can also be redefined by their radii:

ellipse.radius(75, 50)

SVG.Line

line() constructor

constructor on SVG.Container
returns SVG.Line which inherits from SVG.Shape

Create a line from point A to point B:

var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })

Creating a line element can be done in four ways. Look at the plot() method to see all the possibilities.

line.array()

returns SVG.PointArray

References the SVG.PointArray instance. This method is rather intended for internal use:

polyline.array()

More info: SVG.PointArray.

line.plot()

returns itself
animate yes

Updating a line is done with the plot() method:

line.plot(50, 30, 100, 150)

Alternatively it also accepts a point string:

line.plot('0,0 100,150')

Or a point array:

line.plot([[0, 0], [100, 150]])

Or an instance of SVG.PointArray:

var array = new SVG.PointArray([[0, 0], [100, 150]])
line.plot(array)

The plot() method can also be animated:

line.animate(3000).plot([[200, 200], [100, 150]])

SVG.Polyline

polyline() constructor

constructor on SVG.Container
returns SVG.Polyine which inherits from SVG.Shape

The polyline element defines a set of connected straight line segments. Typically, polyline elements define open shapes:

var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

Polyline strings consist of a list of points separated by commas or spaces. So x,y x,y x,y as well as x y x y x y or even x,y,x,y,x,y will work.

As an alternative, an array of points will work as well:

var polyline = draw.polyline([[0,0], [100,50], [50,100]])

Or even a flat array of points that's preferred:

var polyline = draw.polyline([0,0, 100,50, 50,100])

polyline.array()

returns SVG.PointArray

References the SVG.PointArray instance. This method is rather intended for internal use:

polyline.array()

More info: SVG.PointArray.

polyline.clear()

returns itself

When the given point data is parsed, the result is cached. This method clears the cache.

polyline.clear()

polyline.plot()

returns itself
animate yes

Polylines can be updated using the plot() method:

polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

The plot() method can also be animated:

polyline.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

SVG.Polygon

polygon() constructor

constructor on SVG.Container
returns SVG.Polygon which inherits from SVG.Shape

The polygon element, unlike the polyline element, defines a closed shape consisting of a set of connected straight line segments:

var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

Polygon strings or arrays are exactly the same as polyline strings. There is no need to close the shape as the first and last point will be connected automatically.

polygon.array()

returns SVG.PointArray

References the SVG.PointArray instance. This method is rather intended for internal use:

polygon.array()

More info: SVG.PointArray.

polygon.clear()

returns itself

When the given point data is parsed, the result is cached. This method clears the cache.

polygon.clear()

polygon.plot()

returns itself
animate yes

Like polylines, polygons can be updated using the plot() method:

polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

The plot() method can also be animated:

polygon.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

SVG.Path

path() constructor

constructor on SVG.Container
returns SVG.Path which inherits from SVG.Shape

The path string is similar to the polygon string but much more complex in order to support curves:

draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')

For more details on path data strings, please refer to the SVG documentation on path data.

path.array()

returns SVG.PathArray

References the SVG.PathArray instance. This method is rather intended for internal use:

path.array()

More info: SVG.PathArray.

path.clear()

returns itself

When the given path data is parsed, the result is cached. This method clears the cache.

path.clear()

path.length()

returns number

Get the total length of a path element:

var length = path.length()

path.pointAt()

returns SVG.Point

Get point on a path at given length:

var point = path.pointAt(105)

path.plot()

returns itself
animate yes

Paths can be updated using the plot() method:

path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')

The plot() method can also be animated:

path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)

There is only basic support for animating paths baked into SVG.js, which means that only paths with the same commands (M,C,S etc.) are animateable.

path.text()

returns SVG.TextPath

Creating a text element with a textpath linked to the current path can be done with the text() method:

var textpath = path.text('SVG.js rocks!')

SVG.Text

text() constructor

constructor on SVG.Container
returns SVG.Text which inherits from SVG.Shape

Unlike html, text in svg is much harder to tame. There is no way to create flowing text, so newlines should be entered manually. In SVG.js there are two ways to create text elements.

The first and easiest method is to provide a string of text, split by newlines:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

This will automatically create a block of text and insert newlines where necessary.

The second method will give you much more control but requires a bit more code:

var text = draw.text(function(add) {
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})

If you want to go the other way and don't want to add tspans at all, just one line of text, you can use the plain() method instead:

var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')

This is a shortcut to the plain method on the SVG.Text instance which doesn't render newlines at all.

text.build()

returns itself

The build() can be used to enable / disable build mode. With build mode disabled, the plain() and tspan() methods will first call the clear() method before adding the new content. So when build mode is enabled, plain() and tspan() will append the new content to the existing content. When passing a block to the text() method, build mode is toggled automatically before and after the block is called. But in some cases it might be useful to be able to toggle it manually:

var text = draw.text('This is just the start, ')

text.build(true)  // enables build mode

var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')

text.build(false) // disables build mode

tspan.animate('2s').fill('#f06')

text.clear()

returns itself

Clear all the contents of the called text element:

text.clear()

text.length()

returns number

Gets the total computed text length of all tspans together:

text.length()

text.font() as setter

returns itself

A convenience method to add font-related properties:

text.font({
  family:   'Helvetica'
, size:     144
, anchor:   'middle'
, leading:  '1.5em'
})

Not unlike the attr() method, the font() method also accepts a key/value pair:

text.font('family', 'Menlo')

Available properties are:

leading (will do the same as calling the leading() method as setter)
anchor (will set the text-anchor attribute)
family (will set the font-family attribute)
size (will set the font-size attribute)
stretch (will set the font-stretch attribute)
style (will set the font-style attribute)
variant (will set the font-variant attribute)
weight (will set the font-weight attribute)

Any other property will be applied as given. So, for example, the letter-spacing property will just be applied as it would be given to the attr() method. More on font-related properties here.

text.font() as getter

As you might expect, the font() method also acts as a getter:

var leading = text.font('leading')

text.leading() as setter

returns itself
animate yes

As opposed to html, where leading is defined by line-height, svg does not have a natural leading equivalent. In svg, lines are not defined naturally. They are defined by <tspan> nodes with a dy attribute defining the line height and an x value resetting the line to the x position of the parent text element. But you can also have many nodes in one line defining a different y, dy, x or even dx value. This gives us a lot of freedom, but also a lot more responsibility. We have to decide when a new line is defined, where it starts, what its offset is and what it's height is. The leading() method in SVG.js tries to ease the pain by giving you behaviour that is much closer to html. In combination with newline separated text, it works just like html:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
text.leading(1.3)

This will render a text element with a tspan element for each line, with a dy value of 130% of the font size.

Note that the leading() method assumes that every first level tspan in a text node represents a new line. Using leading() on text elements containing multiple tspans in one line (e.g. without a wrapping tspan defining a new line) will render scrambled. So it is advisable to use this method with care, preferably only when throwing newline separated text at the text element or calling the newLine() method on every first level tspan added in the block passed as an argument to the text element.

text.leading() as getter

returns value

Get the current leading value:

var leading = text.leading()

text.path()

returns SVG.TextPath

Creates a textPath in a text element and returns the textPath:

var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})

var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'

var textpath = text.path(path).font({ size: 42.5, family: 'Verdana' })

text.textPath()

To get the textpath in a text use textPath():

var textpath = text.textPath().attr('startOffset', '50%')

text.plain()

returns itself

If the content of the element doesn't need any styling or multiple lines, it might be sufficient to just add some plain text:

text.plain('I do not have any expectations.')

text.rebuild()

returns itself

This is an internal callback that probably never needs to be called manually. Basically it rebuilds the text element whenerver font-size and x attributes or the leading() of the text element are modified. This method also acts a setter to enable or disable rebuilding:

text.rebuild(false) //-> disables rebuilding
text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element

text.text() as setter

returns itself

Changing text afterwards is also possible with the text() method:

text.text('Brilliant!')

text.text() as getter

returns string

To get the raw text content:

text.text()

text.tspan()

returns SVG.Tspan

Just adding one tspan is also possible:

text.tspan(' on a train...').fill('#f06')

SVG.TextPath

textPath() constructor for textPath

constructor on SVG.Container
returns SVG.TextPath which inherits from SVG.Text

To construct a text along a path, the textPath() constructor can be used:

var textpath = draw.textPath('Some Text along a path', 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

Note: If a startOffset other than a percentage is given, then the value represents a distance along the path measured in the current user coordinate system.

textPath.array()

returns SVG.PathArray

Get the path array of the underlying path:

var array = textpath.array()

textPath.plot()

returns itself
animate yes

Change the path on the textpath element:

text.textPath().plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200')

textPath.textPath()

returns SVG.TextPath

Referencing the textPath node directly:

var textPath = text.textPath()

textPath.track()

returns SVG.Path

Referencing the linked path element directly:

var path = textpath.track()

Note: SVG.TextPath inherits from SVG.Text, so all those methods are inherited as well.

Events for SVG.Text

The text element has one event. It is fired every time the rebuild() method is called:

text.on('rebuild', function() {
  // whatever you need to do after rebuilding
})

SVG.Tspan

tspan() constructor

constructor on SVG.Text
returns SVG.Tspan which inherits from SVG.Text

The tspan elements are only available inside text elements or inside other tspan elements.

text.tspan('spannened')

tspan.clear()

returns itself

Clear all the contents of the called tspan element:

tspan.clear()

tspan.dx()

returns itself
animate yes

Define the dynamic x value of the element, much like a html element with position:relative and left defined:

tspan.dx(30)

tspan.dy()

returns itself
animate yes

Define the dynamic y value of the element, much like a html element with position:relative and top defined:

tspan.dy(30)

tspan.plain()

returns itself

Just adds some plain text:

tspan.plain('I do not have any expectations.')

tspan.length()

returns number

Gets the total computed text length:

tspan.length()

tspan.newLine()

returns itself

The newLine() is a convenience method for adding a new line with a dy attribute using the current "leading":

var text = draw.text(function(add) {
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})

tspan.text()

returns itself

Update the content of the tspan. This can be done by either passing a string:

tspan.text('Just a string.')

Which will basicly call the plain() method:

Or by passing a block to add more specific content inside the called tspan:

tspan.text(function(add) {
  add.plain('Just plain text.')
  add.tspan('Fancy text wrapped in a tspan.').fill('#f06')
  add.tspan(function(addMore) {
    addMore.tspan('And you can doo deeper and deeper...')
  })
})

tspan.tspan()

returns SVG.Tspan

Add a nested tspan:

tspan.tspan('I am a child of my parent').fill('#f06')

SVG.Image

image() constructor

constructor on SVG.Container
returns SVG.Image which inherits from SVG.Shape

Creating images is as you might expect:

var image = draw.image('/path/to/image.jpg')

If you want to execute a callback once the image is loaded, you can pass a function as additional parameter:

var image = draw.image('/path/to/image.jpg', function (event) {
  // image loaded
  // this is the loading event for the underlying img element
  // you can access the natural width and height of the image with
  // event.target.naturalWidth, event.target.naturalHeight
})

image.load()

returns itself

Loading another image can be done with the load() method:

image.load('/path/to/another/image.jpg', callback)

Image events

You can bind to the load and error event when loading an image.
This can be done as always with on:

image.on('load', function (e) {
  // this is the loading event for the svg image
})

SVG.Gradient

gradient() constructor

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

There are linear and radial gradients. The linear gradient can be created like this:

var gradient = draw.gradient('linear', function(add) {
  add.stop(0, '#333')
  add.stop(1, '#fff')
})

Finally, to use the gradient on an element:

rect.attr({ fill: gradient })

Or:

rect.fill(gradient)

MDN has a great example page on how SVG Gradients work.

gradient.stop()

returns itself

The offset and color parameters are required for stops, opacity is optional. The offset is a float between 0 and 1, or a percentage value (e.g. 33%).

gradient.stop(0, '#333')

gradient.stop({ offset: 0, color: '#333', opacity: 1 })

gradient.url()

returns string

gradient.url() //-> returns 'url(#SvgjsGradient1234)'

gradient.from()

returns itself
animate yes

To define the direction you can set from x, y and to x, y:

gradient.from(0, 0).to(0, 1)

The from and to values are also expressed in percent.

gradient.get()

returns SVG.Stop

The get() method makes it even easier to get a stop from an existing gradient:

var gradient = draw.gradient('radial', function(add) {
  add.stop({ offset: 0, color: '#000', opacity: 1 })   // -> first
  add.stop({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
  add.stop({ offset: 1, color: '#066', opacity: 1 })   // -> third
})

var s1 = gradient.get(0) // -> returns "first" stop

gradient.radius()

returns itself
animate yes

Radial gradients have a radius() method to define the outermost radius to where the inner color should develop:

var gradient = draw.gradient('radial', function(add) {
  add.stop(0, '#333')
  add.stop(1, '#fff')
})

gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

gradient.to()

returns itself
animate yes

To define the direction you can set from x, y and to x, y:

gradient.from(0, 0).to(0, 1)

The from and to values are also expressed in percent.

gradient.update()

returns itself

A gradient can also be updated afterwards:

gradient.update(function(add) {
  add.stop(0.1, '#333', 0.2)
  add.stop(0.9, '#f03', 1)
})

And even a single stop can be updated:

var s1, s2, s3

draw.gradient('radial', function(add) {
  s1 = add.stop(0, '#000')
  s2 = add.stop(0.5, '#f03')
  s3 = add.stop(1, '#066')
})

s1.update(0.1, '#0f0', 1)

SVG.Stop

at() constructor

constructor on SVG.Gradient
returns SVG.Stop which inherits from SVG.Element

The stop elements are only available inside gradient elements.

var stop = gradient.stop(0.5, '#f03')

var stop = gradient.stop({ offset: 0.5, color: '#f06', opacity: 1 })

stop.update()

returns itself

Takes the same parameters as the constructor.

stop.update(0, '#333')

stop.update({ offset: 0, color: '#333', opacity: 1 })

SVG.Pattern

pattern() constructor

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

Creating a pattern is very similar to creating gradients:

var pattern = draw.pattern(20, 20, function(add) {
  add.rect(20,20).fill('#f06')
  add.rect(10,10)
  add.rect(10,10).move(10,10)
})

This creates a checkered pattern of 20 x 20 pixels. You can add any available element to your pattern.

Finally, to use the pattern on an element:

rect.attr({ fill: pattern })

Or:

rect.fill(pattern)

pattern.url()

returns string

pattern.url() //-> returns 'url(#SvgjsPattern1234)'

pattern.update()

returns itself

A pattern can also be updated afterwards:

pattern.update(function(add) {
  add.circle(15).center(10,10)
})

SVG.Mask

mask() constructor

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

var ellipse = draw.ellipse(80, 40).move(10, 10).fill('#fff')

var mask = draw.mask().add(ellipse)

rect.maskWith(mask)

But you can also use multiple elements:

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 }).fill({ color: '#fff' })

var mask = draw.mask().add(text).add(ellipse)

rect.maskWith(mask)

maskWith()

constructor on SVG.Element
returns itself

The easiest way to mask is to use a single element:

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })

rect.maskWith(ellipse)

If you want the masked object to be rendered at 100% you need to set the fill color of the masking object to white. But you might also want to use a gradient:

var gradient = draw.gradient('linear', function(add) {
  add.stop({ offset: 0, color: '#000' })
  add.stop({ offset: 1, color: '#fff' })
})

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient })

rect.maskWith(ellipse)

mask.unmask()

returns itself

Unmasking the elements can be done with the unmask() method:

rect.unmask()

The unmask() method returns the masking element.

mask.remove()

returns itself

Removing the mask altogether will also unmask() all masked elements as well:

mask.remove()

element.masker()

returns SVG.Mask

For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask:

rect.masker().fill('#fff')

SVG.ClipPath

Clipping elements works exactly the same as masking elements. The only difference is that clipped elements will adopt the geometry of the clipping element. Therefore events are only triggered when entering the clipping element whereas with masks the masked element triggers the event. Another difference is that masks can define opacity with their fill colour and clipPaths can't.

clip() constructor

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

Clip with multiple elements:

var ellipse = draw.ellipse(80, 40).move(10, 10)
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 })

var clip = draw.clip().add(text).add(ellipse)

rect.clipWith(clip)

clipWith()

returns itself

var ellipse = draw.ellipse(80, 40).move(10, 10)

rect.clipWith(ellipse)

clipPath.unclip()

returns itself

Unclipping the elements can be done with the unclip() method:

rect.unclip()

clipPath.remove()

returns itself

Removing the clip alltogether will also unclip() all clipped elements as well:

clip.remove()

element.clipper()

returns SVG.ClipPath

For your convenience, the clipping element is also referenced in the clipped element. This can be useful in case you want to change the clipPath:

rect.clipper().move(10, 10)

SVG.Use

use() constructor

constructor on SVG.Container
returns SVG.Use which inherits from SVG.Shape

The use element simply emulates another existing element. Any changes on the master element will be reflected on all the use instances. The usage of use() is very straightforward:

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

In the case of the example above two rects will appear on the svg drawing, the original and the use instance. In some cases, you might want to hide the original element. The best way to do this is to create the original element in the defs node:

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

In this way, the rect element acts as a library element. You can edit it, but it won't be rendered.

Another way is to point an external SVG file, just specified the element id and path to file.

var use  = draw.use('elementId', 'path/to/file.svg')

This way is useful when you have complex images already created.
Note that, for external images (outside your domain) it may be necessary to load the file with XHR.

SVG.Marker

marker() constructor

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

Markers can be added to every individual point of a line, polyline, polygon and path. There are three types of markers: start, mid and end. Where start represents the first point, end the last and mid every point in between.

var path = draw.path('M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100')

path.fill('none').move(20, 20).stroke({ width: 1, color: '#ccc' })

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
  add.rect(5, 10).cx(5).fill('#ccc')
})
path.marker('end', 20, 20, function(add) {
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(12, 10)

  this.fill('#0f9')
})

The marker() method can be used in three ways. Firstly, a marker can be created on any container element (e.g. svg, nested, group, ...). This is useful if you plan to reuse the marker many times, so it will create a marker in the defs but not show it yet:

var marker = draw.marker(10, 10, function(add) {
  add.rect(10, 10)
})

Secondly a marker can be created and applied directly on its target element:

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})

This will create a marker in the defs and apply it directly. Note that the first argument defines the position of the marker and that there are four arguments as opposed to three with the first example.

Lastly, if a marker is created for reuse on a container element, it can be applied directly to the target element:

path.marker('mid', marker)

Finally, to get a marker instance from the target element reference:

path.reference('marker-end')

marker.height()

returns itself
animate yes

Defines the markerHeight attribute:

marker.height(10)

marker.ref()

returns itself

By default, the refX and refY attributes of a marker are set to respectively half the width and height values. To define the refX and refY of a marker differently:

marker.ref(2, 7)

marker.size()

returns itself
animate yes

Defines the markerWidth and markerHeight attributes:

marker.size(10, 10)

marker.update()

returns itself

Updating the contents of a marker will clear() the existing content and add the content defined in the block passed as the first argument:

marker.update(function(add) {
  add.circle(10)
})

marker.width()

returns itself
animate yes

Defines the markerWidth attribute:

marker.width(10)

SVG.Style

The Style element creates a style-tag and adds rules for a selector

style() constructor

constructor on SVG.Container
returns SVG.Style which inherits from SVG.Element

var style = draw.style('#myId', {color: 'blue'})

fontface() constructor

constructor on SVG.Container
returns SVG.Style which inherits from SVG.Element

var style = draw.fontface('Arial', 'url', {...otherParameters})

style.rule()

Adds another rule to the style tag:

var style = draw.style('#myId', {color: 'blue'})
style.rule('.myClass', {fontSize: 16})

style.font()

Adds another font to the style tag:

var style = draw.style('#myId', {color: 'blue'})
style.font('Arial', 'url', {...otherParameters})

SVG.ForeignObject

A foreign object can hold objects which are not from the svg namespace. Mostly this is HTML and is used together with SVG() to add html elements to it.

foreignObject() constructor

constructor on SVG.Container
returns SVG.ForeignObject which inherits from SVG.Element

var foreignObject = draw.foreignObject(width, height)
foreignObject.add(SVG('<input type="text">'))