Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The
SVG element is used to render text along the shape of a
element.
The text must be enclosed in the
element and its href
attribute is used to reference the desired
.
Usage context
Categories | Text content element, Text content child element |
---|---|
Permitted content | Character data and any number of the following elements, in any order: Descriptive elements , , , ,
|
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:; 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:
; 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:
| | ; Default value: 0
; Animatable: yes textLength
-
The width of the space into which the text will render. Value type:
| | ; Default value: auto; Animatable: yes
DOM Interface
This element implements the SVGTextPathElement
interface.
Example
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextPathElement |