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 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 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 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 object

Get point on a path at given length:

var point = path.pointAt(105) //-> returns { x : 96.88497924804688, y : 58.062747955322266 }

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.

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() bethod 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.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 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

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 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 = 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 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 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:

  • width
  • height
  • ratio (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 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(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" 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(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 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(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 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 nd 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.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>
Fork me on GitHub