W3cubDocs

/SVG

<tspan>

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

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

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).

See also

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan