Elements
SVG.Element is the base prototype wrapping all elements (or nodes for that matter) in SVG.js. An extra level of refinement is added with SVG.Shape. Every element that can take a fill and/or stroke attribute. It is preferred to extend elements with your own methods on SVG.Shape, rather than on SVG.Element.
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 comma's 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 SVGPoint
Get point on a path at given length:
var point = path.pointAt(105)Note: pointAt() returns a native SVGPoint and not a SVG.Point.
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.
If you need to animate paths that do not share the same commands in order, you can use svg.pathmorphing.js
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 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.lines()
returns SVG.Set
All first level tspans can be referenced with the lines() method:
text.lines()This will return an instance of SVG.Set including all tspan elements.
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
path() constructor for textPath
constructor on SVG.Text
returns SVG.TextPath which inherits from SVG.Text
A nice feature in svg is the ability to run text along a path:
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'
text.path(path).font({ size: 42.5, family: 'Verdana' })When calling the path() method on a text element, the text element is mutated into an intermediate between a text and a path element. From that point on the text element will also feature a plot() method to update the path:
text.plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')Attributes specific to the <textPath> element can be applied to the textPath instance itself:
text.textPath().attr('startOffset', '50%')And they can be animated as well of course:
text.textPath().animate(3000).attr('startOffset', '80%')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 = text.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 = text.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')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 know the size of the image, those parameters can be passed as the second and third arguments:
var image = draw.image('/path/to/image.jpg', 200, 300)image.load()
returns itself
Loading another image can be done with the load() method:
image.load('/path/to/another/image.jpg')image.loaded()
returns itself
If you don't know the size of the image, obviously you will have to wait for the image to be loaded:
var image = draw.image('/path/to/image.jpg').loaded(function(loader) {
this.size(loader.width, loader.height)
})The returned loader object as first the argument of the loaded method contains four values:
widthheightratio(width / height)url
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(stop) {
stop.at(0, '#333')
stop.at(1, '#fff')
})Finally, to use the gradient on an element:
rect.attr({ fill: gradient })Or:
rect.fill(gradient)By passing the gradient instance as the fill on any element, the fill() method will be called on the gradient instance.
MDN has a great example page on how SVG Gradients work.
gradient.at()
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%).
stop.at(0, '#333')or
stop.at({ offset: 0, color: '#333', opacity: 1 })gradient.fill()
returns string
gradient.fill() //-> 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(stop) {
stop.at({ offset: 0, color: '#000', opacity: 1 }) // -> first
stop.at({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
stop.at({ 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(stop) {
stop.at(0, '#333')
stop.at(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(stop) {
stop.at(0.1, '#333', 0.2)
stop.at(0.9, '#f03', 1)
})And even a single stop can be updated:
var s1, s2, s3
draw.gradient('radial', function(stop) {
s1 = stop.at(0, '#000')
s2 = stop.at(0.5, '#f03')
s3 = stop.at(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.at(0.5, '#f03')or
var stop = gradient.at({ 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)By passing the pattern instance as the fill on any element, the fill() method will be called on the pattern instance.
pattern.fill()
returns string
pattern.fill() //-> 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(stop) {
stop.at({ offset: 0, color: '#000' })
stop.at({ 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()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()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 nd 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)SVG.Bare
For all SVG elements that are not described by SVG.js, the SVG.Bare class comes in handy. This class inherits directly from SVG.Element and makes it possible to add custom methods in a separate namespace without polluting the main SVG.Element namespace. Consider it your personal playground.
element() constructor
returns SVG.Bare which inherits from SVG.Element
The SVG.Bare class can be instantiated with the element() method on any parent element:
var element = draw.element('title')The string value passed as the first argument is the node name that should be generated.
Additionally, any existing class name can be passed as the second argument to define from which class the element should inherit:
var element = draw.element('symbol', SVG.Parent)This gives you as the user a lot of power. But remember, with great power comes great responsibility.
element.words()
returns itself
The SVG.Bare 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>