Using the SVG tspan Element with Text Strings

---

Rendering Shadowed Text

Consider the text string rendered in Figure 8.5.

Figure 8.5: A string of shadowed text.

The SVG document in Listing 8.5 demonstrates how to use the SVG text element in order to render a text string with a shadow effect.

Listing 8.5 shadowText1.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(50,150)">   <text  x="8" y="8"          fill="black" stroke="black" stroke-width="4"         font-size="72">       Shadow Text   </text>   <text  x="0" y="0"          fill="red" stroke="black" stroke-width="4"         font-size="72">       Shadow Text   </text> </g> </svg>

Remarks

The SVG code in Listing 8.5 contains two SVG text elements, both of which render the same text string Shadow Text with a font size of 72. Notice how the shadow effect is achieved without using an SVG filter: first the text string is rendered as a background 'shadow' effect using a fill value of black, and then the same text string is rendered again with a fill value of red. Observe that the first SVG text element contains the fragment:

x="8" y="8"

and the second SVG text element contains the fragment:

x="0" y="0"

Consequently, the first SVG text element is shifted 8 pixels to the right and 8 pixels downward with respect to the second SVG text element, thereby creating a shadow effect.

---