<textPath>

<altglyph>
<altglyphdef>
<altglyphitem>
<glyph>
<glyphref>
<text>
<textpath>
<tref>
<tspan>
SVG Elements
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

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.

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>

Attributes

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
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
method: Which method to render individual glyphs along the path. Value type: align|stretch ; Default value: align; Animatable: yes
path: The path on which the text should be rendered. Value type: <path_data> ; Default value: none; Animatable: yes
side: Which side of the path the text should be rendered. Value type: left|right ; Default value: left; Animatable: yes
spacing: How space between glyphs should be handled. Value type: auto|exact ; Default value: exact; Animatable: yes
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
textLength: The width of the space into which the text will render. Value type: <length>|<percentage>|<number> ; Default value: auto; Animatable: yes

Global attributes

Core Attributes: Most notably: id, tabindex
Styling Attributes: class, style
Conditional Processing Attributes: Most notably: requiredExtensions, systemLanguage
Event Attributes: Global event attributes, Graphical event attributes
Presentation Attributes: Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA Attributes: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
XLink Attributes: xlink:title

Usage notes

Categories	Text content element, Text content child element
Permitted content	Character data and any number of the following elements, in any order: Descriptive elements `<a>`, `<altGlyph>`, `<animate>`, `<animateColor>`, `<set>`, `<tref>`, `<tspan>`

Specifications

Specification
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # TextPathElement

Browser compatibility

BCD tables only load in the browser