text

The SVG text element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to text, like any other SVG graphics element.

If text is included in SVG not inside of a text element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.

Usually, this element is created with:

const text = parentElement.add('text')

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

More info: mdn | w3c

.x()

text.x( x )

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

• argument: {number} x The x value

• returns: {gSVGObject} The original object

const x = element.x();

Get the x current value.

• returns: {number}

.y()

text.y( y )

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

• argument: {number} y The y value

• returns: {gSVGObject} The original object

const y = element.y();

Get the y current value.

• returns: {number}

.dx()

text.dx( x )

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

• argument: {number} x The x value

• returns: {gSVGObject} The original object

const dx = element.dx();

Get the dx current value.

• returns: {number}

.dy()

text.dy( y )

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

• argument: {number} y The y value

• returns: {gSVGObject} The original object

const dy = element.dy();

Get the dy current value.

• returns: {number}

.rotate()

text.rotate( angle )

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

• argument: {number|string} angle The angle value

• returns: {gSVGObject} The original object

const rotate = element.rotate();

Get the rotate current value.

• returns: {number|string}

.lengthAdjust()

text.lengthAdjust( adjust )

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

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

• returns: {gSVGObject} The original object

const lengthAdjust = element.lengthAdjust();

Get the lengthAdjust current value.

• returns: {string}

.textLength()

text.textLength( width )

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

• argument: {number|string} width The width length

• returns: {gSVGObject} The original object

const textLength = element.textLength();

Get the textLength current value.

• returns: {number|string}

• Parent elements: a | clipPath | defs | g | marker | mask | pattern | svg | switch | symbol | text.

• Child elements: a | animate | animateMotion | animateTransform | desc | metadata | mpath | set | text | textPath | title | tspan.