Graphery SVG

# tspan

The SVG tspan element defines a subtext within a text element or another tspan element. It allows for adjustment of the style and/or position of that subtext as needed.

Usually, this element is created with:

const tspan = parentElement.add('tspan')

It's possible to create it as a disconnected element with gySVG('tspan') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

# .x()

tspan.x( x )

Set the x coordinate of the starting point of the text baseline.

  • argument: {number} x The x value

  • returns: {gySVGObject} The original object

const x = element.x();

Get the x current value.

  • returns: {number}

# .y()

tspan.y( y )

Set the y coordinate of the starting point of the text baseline.

  • argument: {number} y The y value

  • returns: {gySVGObject} The original object

const y = element.y();

Get the y current value.

  • returns: {number}

# .dx()

tspan.dx( x )

Set shifts the text position horizontally from a previous text element.

  • argument: {number} x The x gap from the previous value

  • returns: {gySVGObject} The original object

const dx = element.dx();

Get the dx current value.

  • returns: {number}

# .dy()

tspan.dy( y )

Set shifts the text position vertically from a previous text element.

  • argument: {number} y The y gap from the previous value

  • returns: {gySVGObject} The original object

const dy = element.dy();

Get the dy current value.

  • returns: {number}

# .rotate()

tspan.rotate( angle )

Set rotates orientation of each individual glyph. Can rotate glyphs individually.

  • argument: {number|string} ange Must be auto | auto-reverse | angle value

  • returns: {gySVGObject} The original object

const rotate = element.rotate();

Get the rotate current value.

  • returns: {number|string}

# .lengthAdjust()

tspan.lengthAdjust( mode )

Set how the text is stretched or compressed to fit the width defined by the textLength attribute.

  • argument: {string} mode Must be spacing | spacingAndGlyphs

  • returns: {gySVGObject} The original object

const lengthAdjust = element.lengthAdjust();

Get the lengthAdjust current value.

  • returns: {string}

# .textLength()

tspan.textLength( length )

Set a width that the text should be scaled to fit.

  • argument: {number|tring} length The length value (length or percentage)

  • returns: {gySVGObject} The original object

const textLength = element.textLength();

Get the textLength current value.

← use →