<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
html
<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
Global attributes
- Core Attributes
- Styling Attributes
class
,style
- Conditional Processing Attributes
-
Most notably:
requiredExtensions
,systemLanguage
- 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
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextPathElement |
Browser compatibility
BCD tables only load in the browser