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.
Optionally attributes can be added directly by passing them as second argument:
var element = draw.element('title', {id: 'myId'})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 itselfanimate 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 itselfanimate 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 itselfanimate 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 itselfanimate 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 itselfanimate 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 itselfanimate 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 itselfanimate 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()
})As a more convinient syntax for newlines it is also possible to use the newLine() constructor instead of tspan(...).newLine():
var text = draw.text(function(add) {
add.newLine('Same as')
add.newLine('above').fill('#f06')
})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.amove()
returns itself
Unlike other elements, text is usually positioned accordining to its baseline and textanchor. Svg.js gives you the possibilitie to move every shape by its upper left corner.
However, sometimes it is needed to move text by baseline and anchor. This can be realized with amove()
var text = draw.text('Some text for you')
text.amove(100, 50)text.ax() as setter
returns itselfanimate yes
Move the element by its text anchor along the x-axis only:
text.ax(200)text.ax() as getter
returns value
Without an argument the ax() method serves as a getter:
var x = rect.ax()text.ay() as setter
returns itselfanimate yes
Move the element by its baseline along the y-axis only:
text.ay(200)text.ay() as getter
returns value
Without an argument the ax() method serves as a getter:
var x = rect.ay()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 theleading()method as setter)anchor(will set thetext-anchorattribute)family(will set thefont-familyattribute)size(will set thefont-sizeattribute)stretch(will set thefont-stretchattribute)style(will set thefont-styleattribute)variant(will set thefont-variantattribute)weight(will set thefont-weightattribute)
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 itselfanimate 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 elementtext.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 itselfanimate 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.Shape
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 itselfanimate 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 itselfanimate 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')tspan.amove()
See Text.amove()
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')or
gradient.stop({ offset: 0, color: '#333', opacity: 1 })gradient.url()
returns string
gradient.url() //-> returns 'url(#SvgjsGradient1234)'gradient.from()
returns itselfanimate 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" stopgradient.radius()
returns itselfanimate 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 itselfanimate 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')or
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')or
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 itselfanimate 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 itselfanimate 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 itselfanimate yes
Defines the markerWidth attribute:
marker.width(10)marker.orient()
returns itselfanimate no
Defines the orient attribute:
marker.orient(50)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)
// Pass true as second parameter to SVG() to create an html in the html-namespace
foreignObject.add(SVG('<input type="text">', true))