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.
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> --> <text> <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath> </text> </svg>
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
Experimental
The path on which the text should be rendered. Value type: <path_data> ; Default value: none; Animatable: yes
side
Experimental
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
class
, style
Most notably: requiredExtensions
, systemLanguage
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-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:title
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> , <set> , <tref> , <tspan>
|
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextPathElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
textPath |
Yes | 12 | Yes | Yes | Yes | 3Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799) |
Yes | Yes | Yes | Yes | 3Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799) |
Yes |
href |
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
12 | Yes | Yes | 37Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
12.1Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
Yes | 37Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
12.2Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
5.0Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work. |
path |
No | No | 61 | No | No | No | No | No | 61 | No | No | No |
side |
No | No | 61 | No | No | No | No | No | 61 | No | No | No |
spacing |
No | No | No | No | No | No | No | No | No | No | No | No |
startOffset |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
xlink_href |
Yes | 12 | Yes | Yes | Yes | 3 | Yes | Yes | Yes | Yes | 3 | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath