Graphery SVG

# textPath

To render text along the shape of a path, enclose the text in a textPath element that has an href attribute with a reference to the path element.

Usually, this element is created with:

const textPath = parentElement.add('textPath')

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

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

# .href()

textPath.href( URLPath )

Set the URL to the path or basic shape on which to render the text. If the path attribute is set, href has no effect.

  • argument: {string} URLPath URL to a path

  • returns: {gySVGObject} The original object

const href = textPath.href();

Get the href current value.

  • returns: {string} Current URL to a path

# .lengthAdjust()

textPath.lengthAdjust( mode )

Set where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves.

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

  • returns: {gySVGObject} The original object

const lengthAdjust = element.lengthAdjust();

Get the lengthAdjust current value.

  • returns: {string}

# .method()

textPath.method( method )

Set which method to render individual glyphs along the path.

  • argument: {string} method Must be align | stretch

  • returns: {gySVGObject} The original object

const method = element.method();

Get the method current value.

  • returns: {string}

# .path()

textPath.path( path )

Set the path on which the values should be rendered.

  • argument: {Array|string} path The path value

  • returns: {gySVGObject} The original object

const path = element.path();

Get the path current value.

  • returns: {Array|string}

# .spacing()

textPath.spacing( width )

Set how space between glyphs should be handled.

  • argument: {number} width The width value

  • returns: {gySVGObject} The original object

const spacing = element.spacing();

Get the spacing current value.

  • returns: {number}

# .startOffset()

textPath.startOffset( offset )

Set how far the beginning of the text should be offset from the beginning of the path.

  • argument: {number} offset The offset value

  • returns: {gySVGObject} The original object

const startOffset = element.startOffset();

Get the startOffset current value.

  • returns: {number}

# .textLength()

textPath.textLength( width )

Set the width of the space into which the text will render.

  • argument: {number} width The width value

  • returns: {gySVGObject} The original object

const textLength = element.textLength();

Get the textLength current value.

← title →