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.
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 | 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
textPath | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari
Full support
3
| WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS
Full support
3
| Samsung Internet Android Full support Yes |
href | Chrome
Full support
Yes
| Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari
Full support
12.1
| WebView Android
Full support
Yes
| Chrome Android
Full support
Yes
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS
Full support
12.2
| Samsung Internet Android
Full support
Yes
|
method | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
path | Chrome No support No | Edge No support No | Firefox Full support 61 | IE ? | Opera ? | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 61 | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
side | Chrome No support No | Edge No support No | Firefox Full support 61 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 61 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
spacing | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
startOffset | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
xlink:href | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
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.