Using Text Decoration with Text Strings | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Using the SVG tspan Element with Text Strings

Consider the text strings rendered in Figure 8.4.

click to expand
Figure 8.4: Text strings with the tspan element.

The SVG document in Listing 8.4 demonstrates how to use the SVG text element with the SVG tspan element in order to render text strings with different effects.

Listing 8.4 tSpanText1.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"       xmlns="http://www.w3.org/2000/svg">   <g transform="translate(10,10)">      <text x="0" y="50" fill="red" font-size="36">       One simple line of          <tspan font-weight="bold"                fill="blue">simple</tspan>       text     </text>     <text x="0" y="200" fill="red" font-size="36">       Another simple line of          <tspan dx="0" dy="-50"                 font-weight="bold"                 fill="green">           simple         </tspan>         <tspan dy="100">            text         </tspan>     </text>   </g> </svg>

Remarks

The SVG code in Listing 8.4 renders two text strings with several SVG tspan elements. The first text string, One simple line of simple text, is rendered with a font size of 36 and a fill color of red. The second occurrence of the word simple is enclosed in the SVG tspan element, which renders the text in bold and with a fill color of blue.

The second text string, Another simple line of simple text, is also rendered with a font size of 36 and a fill color of red. The second occurrence of the word simple is enclosed in the first SVG tspan element, which renders the text in bold and with a fill color of green. In addition, this SVG tspan element specifies the dy attribute with a value of -50, which causes the word simple to be shifted upward by 50 pixels. The second occurrence of the SVG tspan element encloses the word text, and it specifies the dy attribute with a value of 100, which causes the word text to be shifted downward by 100 pixels.