W3cubDocs

/SVG

<textPath>

In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a <path> element. To specify that a block of text is to be rendered along the shape of a <path>, include the given text within a <textPath> element which includes an href attribute with a reference to a <path> element.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <!-- to hide the path, it is usually wrap into 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">
      The quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

Attributes

href
This attribute defines the URL to the path or basic shape on which the text must be rendered. If the path attribute is also set, href as no effect.
Value type: <URL> ; Default value: none; Animatable: yes
lengthAdjust
This attribute indicates where length adjustement should be happening on text.
Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes
method
This attribute defines which method must be used to render individual glyphes along the path.
Value type: align|stretch ; Default value: align; Animatable: yes
path
This attribute defines the path on which the text must be rendered.
Value type: <path_data> ; Default value: none; Animatable: yes
side
This attribute indicates on which side of the path the text should be rendered.
Value type: left|right ; Default value: left; Animatable: yes
spacing
This attribute lets specify how space between glyphes should be handled.
Value type: auto|exact ; Default value: exact; Animatable: yes
startOffset
This attribute lets specify how much the begining of the text should be offset from the begining of the path.
Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes
textLength
This attribute lets specify 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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes Yes Yes Yes Yes 3
3
Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
href Yes 12 Yes Yes Yes Yes
method No No No No No No
path ? ? 61 ? ? ?
side No No 61 No No No
spacing ? ? ? ? ? ?
startOffset Yes 12 Yes Yes Yes Yes
xlink:href Yes 12 Yes Yes Yes 3
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes Yes Yes 3
3
Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
?
href Yes Yes 12 Yes Yes Yes ?
method No No No No No No ?
path ? ? ? 61 ? ? ?
side No No No 61 No No ?
spacing ? ? ? ? ? ? ?
startOffset Yes Yes 12 Yes Yes Yes ?
xlink:href Yes Yes 12 Yes Yes 3 ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath