SVG tspan element
Jakob Jenkov |
The SVG <tspan> element is used to draw multiple lines of text in SVG. Rather than
having to position each line of text absolutely, the <tspan> element
makes it possible to position a line of text relatively to the previous line of text. The
<tspan> element also makes it possible for the user to select and copy-paste several lines of text
at a time, instead not just one text element.
tspan Example
Here is a simple <tspan> example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="15">
<tspan>tspan line 1</tspan>
<tspan>tspan line 2</tspan>
</text>
</svg>
Here is the resulting image:
Notice how the <tspan> results in the text lines being positioned relative to each other
(after each other).
Vertical Positioning
If you want the lines to be positioned relative to each other vertically, you can do so using the dy
attribute (delta y):
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="15">
<tspan>tspan line 1</tspan>
<tspan dy="10">tspan line 2</tspan>
</text>
</svg>
Now the second line of text is displayed 10 pixels below the first line of text, because the
dy attribute of the second <tspan> element is set to "10".
Here is the resulting image:
If you want to position a <tspan> element at an absolute y-position, use the y
attribute, like you would with a <text> element.
If you write multiple numbers inside the dy attribute, each number is applied to the
characters of the text inside the <tspan> element. Here is an example:
<text x="10" y="15">
<tspan dy="5 10 20">123</tspan>
</text>
Here is the resulting image. Notice how the vertical spacing between the glyphs is now changing.
Horizontal Positioning
To position the text relatively on the x-axis you can use the dx attribute (delta x). The
example below shows the effect of setting dx to 30. Notice how the second line of text
is now displayed 30 pixels relative to the end of the first line of text (not the beginning):
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="15">
<tspan>tspan line 1</tspan>
<tspan dx="30" dy="10">tspan line 2</tspan>
</text>
</svg>
Here is the resulting image:
If you specify more than one number inside the dx attribute, each number is applied to each letter
inside the <tspan> element. Here is an example:
<text x="10" y="20">
<tspan dx="5 10 20">123</tspan>
</text>
Here is the resulting image:
You can also set the x attribute to fix the x-coordinate of the text lines. This is useful
if you want to display a list of lines below each other, all left adjusted. Here is an example
that sets x to 10 on three lines:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text y="20">
<tspan x="10">tspan line 1</tspan>
<tspan x="10" dy="15">tspan line 2</tspan>
<tspan x="10" dy="15">tspan line 3</tspan>
</text>
</svg>
Here is the resulting image:
Styling tspan Elements
It is possible to style <tspan> elements individually. Thus you can use a <tspan>
element to style a block of text differently than the rest of the text. Here is an example:
<text x="10" y="20">
Here is a <tspan style="font-weight: bold;">bold</tspan> word.
</text>
Here is the resulting image:
Superscript and Subscript with baseline-shift
You can use the baseline-shift CSS property to create superscript and subscript with the
<tspan> element. Here is an SVG baseline-shift example showing how:
<text x="10" y="20">
Here is a text with <tspan style="baseline-shift: super;">superscript</tspan>
and <tspan style="baseline-shift: sub;">subscript</tspan> mixed with normal
text.
</text>
Here is the resulting image. At the time of writing Firefox (v. 22) did not support this.
| Tweet | |
Jakob Jenkov | |
