Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

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

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>

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<textPath>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<textPath>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes31
href Yes12 Yes Yes Yes Yes
method No No No No No No
path ? ?61 ? ? ?
side No No61 No No No
spacing ? ? ? ? ? ?
startOffset Yes12 Yes Yes Yes Yes
xlink:href Yes12 Yes Yes Yes3
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes31 ?
href Yes Yes12 Yes Yes Yes ?
method No No No No No No ?
path ? ? ?61 ? ? ?
side No No No61 No No ?
spacing ? ? ? ? ? ? ?
startOffset Yes Yes12 Yes Yes Yes ?
xlink:href Yes Yes12 Yes Yes3 ?

1. Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Jeremie, fscholz, Sebastianz, Tigt, jswisher, kimo9191919, kscarfone
Dernière mise à jour par : Jeremie,