# 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 gySVG('text')
and attach it to the SVG document with .attachTo()
.
More info: mdn (opens new window) | w3c (opens new window)
# .x()
text.x( x )
Set the x
coordinate of the starting point of the tex
t baseline.
argument:
{number} x
Thex
valuereturns:
{gySVGObject}
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
They
valuereturns:
{gySVGObject}
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
Thex
valuereturns:
{gySVGObject}
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
They
valuereturns:
{gySVGObject}
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
Theangle
valuereturns:
{gySVGObject}
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 bespacing
|spacingAndGlyphs
returns:
{gySVGObject}
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
Thewidth
lengthreturns:
{gySVGObject}
The original object
const textLength = element.textLength();
Get the textLength
current value.