Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на 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 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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3
Notes
Full support 3
Notes
Notes Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3
Notes
Full support 3
Notes
Notes Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Samsung Internet Android ?
hrefChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
methodChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
path
Experimental
Chrome ? Edge ? Firefox Full support 61IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 61Opera Android ? Safari iOS ? Samsung Internet Android ?
side
Experimental
Chrome No support NoEdge No support NoFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
spacingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
startOffsetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xlink:href
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

Метки документа и участники

Внесли вклад в эту страницу: nicrizzo, Jeremie, fscholz, Sebastianz, Tigt, jswisher, kimo9191919, kscarfone
Обновлялась последний раз: nicrizzo,