Rendering a Text String

---

Rendering a Text String with Colored Borders

Consider the string of text rendered in Figure 8.2.

Figure 8.2: A string of text with a colored bordered.

The SVG document in Listing 8.2 demonstrates how to use the SVG text element in order to render a simple line of text with a colored border.

Listing 8.2 simpleText2.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"   "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">  <svg width="100%" height="100%">  <g transform="translate(100,150)">   <text  x="0" y="0"          fill="red"          stroke="blue"         stroke-width="4"         font-size="96">         Sample Text   </text> </g> </svg> 

Remarks

The SVG code in Listing 8.2 renders the text string Sample Text with a fill value of red and a font size of 96. The lower-left starting point for the string of text is (100,150) because the SVG g element translates the origin to the point (100,150). In this example, the text string is rendered so that the bottom horizontal edge of the text string Sample Text is on the horizontal line that passes through the point (100,150). The rendered text string is blue and has a thickness of four pixels because of the following combination of attribute values:

stroke="blue" stroke-width="4"

---