|
|
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>
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.
|
|