<textPath>
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.
Example
<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
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
Usage context
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextPathElement |
Browser compatibility
BCD tables only load in the browser