Rendering a Text String with Colored Borders | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Using Text Decoration with Text Strings

Consider the text strings rendered in Figure 8.3.

click to expand
Figure 8.3: Text strings with text decoration.

The SVG document in Listing 8.3 demonstrates how to use the SVG text element in order to display strike-through and underlined text.

Listing 8.3 textDecoration1.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(50,50)" font-size="48"                  fill="red" stroke="blue"                  stroke-width="2">     <text x="0" y="50">Regular Text</text>     <text x="0" y="150"            text-decoration="line-through">Deleted Text</text>     <text x="0" y="250"            text-decoration="underline">Underlined Text</text>   </g> </svg>

Remarks

The SVG code in Listing 8.3 renders three text strings, all of which are rendered with a fill color of red and a blue stroke width of 2. This effect is achieved because the SVG g element has been specified as follows:

<g transform="translate(50,50)" font-size="48"                fill="red" stroke="blue"                stroke-width="2">

Since the SVG g element encloses all three SVG text elements, the specified attributes are inherited by the three SVG text elements. In addition, the SVG translate function shifts the origin from the point (0,0) to the point (50,50).

The first text string Regular Text is rendered without any additional adornment.

The second text string Deleted Text is rendered with a line through the middle of the text, thereby creating a strike-through effect.

The third line of text Underlined Text is rendered with a horizontal line that underscores this text string.

In Chapter 2 you also saw how to specify attributes of graphics images by means of internal or external stylesheets. In much the same fashion, such stylesheets can also be used for specifying attributes of rendered text.