<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 thewhite-space CSS property.

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 `<a>`,`<animate>`,`<set>`,`<tspan>`

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 thetextLength 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

DOM Interface

This element implements theSVGTSpanElement interface.

Example

html,body,svg {  height: 100%;}

html

<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">    You are    <tspan>not</tspan>    a banana!  </text></svg>