Change svg text's vertical position using svg.js

Question

I have read the documentation but have no clue how to achieve that. There is no change in dy .

/**
 * Draws text
 * 
 * @param {String} $text        Text
 * @param {int} $x              Starting point X coordinate
 * @param {int} $y              Starting point Y coordinate
 * @param {Object} $font        Font properties
 * @returns {text}              SVG JS text object
 */
drawText = function($text, $x, $y, $font) {
    $svgText = $svg.text(($text !== undefined && $text !== null) ? $text : '-').attr({x: $x, y: $y}).font($font);
    return $svgText.tspan.dy('0.9em');
};

Thanks a lot in advance

Answer 1

I think your problem lies here:

return $svgText.tspan.dy('0.9em');

On a text element tspan is a method, not a reference: http://documentup.com/wout/svg.js#text/tspan

UPDATE:

The tspan() method does not return a tspan already present in the text element, it creates a new one. What you are looking for is the lines reference. Lines holds all the tspans inside the text element. Because lines is an instance of SVG.Set , you can call the dy method directly on it:

text.lines.dy(0.9)

If you want to change the dy of the first element you can use the each method:

text.lines.each(function(i) {
  if (i == 0)
    this.dy(0.9)
})

Note that the leading method might be useful here too: http://documentup.com/wout/svg.js#text/leading