<tspan>
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 <tspan> SVG element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed.
Note:
The <tspan> element does not wrap by default, to make this happen it needs to be styled with the white-space CSS property.
Usage context
Attributes
x-
The x coordinate of the starting point of the text baseline, or the x coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value:
0; Animatable: yes y-
The y coordinate of the starting point of the text baseline, or the y coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value:
0; Animatable: yes dx-
Shifts the text position horizontally from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
dy-
Shifts the text position vertically from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
rotate-
Rotates orientation of each individual glyph. Can rotate glyphs individually. Value type: <list-of-number>; Default value: none; Animatable: yes
lengthAdjust-
How the text is stretched or compressed to fit the width defined by the
textLengthattribute. Value type:spacing|spacingAndGlyphs; Default value:spacing; Animatable: yes textLength-
A width that the text should be scaled to fit. Value type: <length> | <percentage>; Default value: none; Animatable: yes
DOM Interface
This element implements the SVGTSpanElement interface.
Example
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |