Index

The <textPath> SVG element is used to render text along the shape of a {{SVGElement("path")}} element. The text must be enclosed in the <textPath> element and its {{SVGAttr("href")}} attribute is used to reference the desired <path>.

Usage context

{{svginfo}}

Attributes

• {{SVGAttr("href")}}
  • : The URL to the path or basic shape on which to render the text. If the path attribute is set, href has no effect. Value type: <URL>; Default value: none; Animatable: yes
• {{SVGAttr("lengthAdjust")}}
  • : Where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. Value type: spacing | spacingAndGlyphs; Default value: spacing; Animatable: yes
• {{SVGAttr("method")}}
  • : Which method to render individual glyphs along the path. Value type: align | stretch; Default value: align; Animatable: yes
• {{SVGAttr("path")}} {{Experimental_Inline}}
  • : The path on which the text should be rendered. Value type: <path_data>; Default value: none; Animatable: yes
• {{SVGAttr("side")}} {{Experimental_Inline}}
  • : Which side of the path the text should be rendered. Value type: left | right; Default value: left; Animatable: yes
• {{SVGAttr("spacing")}}
  • : How space between glyphs should be handled. Value type: auto | exact; Default value: exact; Animatable: yes
• {{SVGAttr("startOffset")}}
  • : How far the beginning of the text should be offset from the beginning of the path. Value type: <length> | <percentage> | <number>; Default value: 0; Animatable: yes
• {{SVGAttr("textLength")}}
  • : The width of the space into which the text will render. Value type: <length> | <percentage> | <number>; Default value: auto; Animatable: yes

DOM Interface

This element implements the {{domxref("SVGTextPathElement")}} interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

{{EmbedLiveSample('Example', 200, 200)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}