Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.
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>, <altGlyph>, <animate>, <animateColor>, <set>, <tref>, <tspan> |
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGTSpanElement interface.
Example
SVG
<?xml version="1.0"?>
<svg width="250" height="40" viewBox="0 0 250 40"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
<![CDATA[
text{
font: 20px Verdana, Helvetica, Arial, sans-serif;
}
tspan{
fill: red;
font-weight: bold
}
]]>
</style>
<text x="15" y="30">
You are
<tspan>not</tspan>
a banana
</text>
</svg>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<tspan>' in that specification. |
Candidate Recommendation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<tspan>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.5 (1.8)[1] | 9.0 | 9.0 | 3.0.4 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0 | (Yes) | 1.0 (1.8)[1] | No support | (Yes) | 3.0.4 |
The chart is based on these sources.
[1] Various presentation attributes don't work. The attribute rotate was implemented in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1).