<tspan>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The SVG <tspan>
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.
Example
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
<style>
text {
font: italic 12px serif;
}
tspan {
font: bold 10px sans-serif;
fill: red;
}
</style>
<text x="10" y="30" class="small">
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
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
textLength
attribute. 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
Usage context
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextElement |
Browser compatibility
BCD tables only load in the browser