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.

<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> -->

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



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

Usage notes

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


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

Browser compatibility

BCD tables only load in the browser