Objective: Learn to draw, position and style <tspan> elements

SVG text is given a lot more power through the <tspan> element. This allows text to be "broken-up" within a <text> element and have different attributes applied.

11.1 The <tspan> element

The <tspan> element must always be within the<text> element.

There can be any number of <tspan> elements in a <text> element

<text><tspan>Your</tspan><tspan>text</tspan><tspan>here</tspan></text>

In XML, for clarity, this can be written:

<text>
       <tspan>Your</tspan>
       <tspan>text</tspan>
       <tspan>here</tspan>
</text>

11.2 <tspan> primary attributes

<tspan> can have ALL of the text attributes and there are some extras.

x="10" Set the x position of the tspan text to an ABSOLUTE position on the image.

y="10" Set the y position of the tspan text to an ABSOLUTE position on the image.

dx="50" Set the x position of the tspan text RELATIVE to the parent position.

dy="50" Set the y position of the tspan text RELATIVE to the parent position.

SVG Editor: for tspan positioning

Practice you tspan positioning layout here. Each word has a tspan applied. Number Two has a bold style applied to show you can apply all styles to text in a <tspan>.

The blue text has  no position coordinates and a bold style on number two.

The red text has absolute coordinates x,y applied to each tspan. The words are positioned using image coordinates. 

The green text has relative coordinates dx,dy applied to each tspan. The words are positioned relative to each other from the text starting position.

SVG Editor: Using tspan coordinates to create text lines

 You need to use the <tspan> element to lay out text in multiple lines. In this example:

The blue text has <tspan> on each line without positioning coordinates. 

The red text has absolute coordinates x,y on each <tspan>.

The green text has relative coordinates dx,dy on each <tspan>.

SVG Editor: Mixing Absolute and relative coordinates.

You can mix absolute and relative coordinates to make it easy to create vertically aligned text. You can even put in a paragraph opening line indent if required.

In this example horizontal positioning uses absolute coordinates x,  and vertical line spacing uses relative coordinates dy.

SVG Editor: multi-character positioning with tspan coordinates

As with text you can use a position array to This technique can be particularly useful for positioning numbers on graph axises, etc.

The red text shows the absolute coordinate arrays  x="50 350 350 50"  and y="50 50 190 190".

The green text shows the relative coordinate arrays for the horizontal numbers dx="50 50 50 50 50 50"  and dy="0"

 SVG-Editor: More <tspan> attributes

11.3 Exercises

Practice using tspan positioning and styling until you are comfortable with making the appropriate coordinate selection for any particular use