Tspan

returns SVG.Tspan which inherits from SVG.Shape

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

clear()

returns itself

Clear all the contents of the called tspan element:

tspan.clear()

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)

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)

plain()

returns itself

Just adds some plain text:

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

length()

returns number

Gets the total computed text length:

tspan.length()

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()
})

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

returns SVG.Tspan

Add a nested tspan:

tspan.tspan('I am a child of my parent').fill('#f06')
Fork me on GitHub