Rendering Shadowed Text

---

Rendering Shadowed blur Text

Consider the string of text rendered in Figure 8.6.

Figure 8.6: A string of shadowed blur text.

The SVG document in Listing 8.6 demonstrates how to use the SVG text element in order to render a simple line of shadowed blur text.

Listing 8.6 shadowFilterText1.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%">    <defs>   <filter            filterUnits="objectBoundingBox"      x="0" y="0"       width="100%" height="100%">       <feGaussianBlur stdDeviation="4"/>   </filter>   </defs>  <g transform="translate(50,150)">   <text  x="15" y="15"          filter="url(#blurFilter1)"         fill="red" stroke="black" stroke-width="2"         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.6 renders the text string Shadow Text with a fill value of red and a font size of 72. The first text string is rendered with a filter attribute that references a so-called blur filter that is defined in the SVG defs element. Next, the same text string is rendered again with a fill value of red. Notice how the shadow effect is combined with an SVG filter. Specifically, the first SVG text element contains the fragment:

x="15" y="15"

and the second SVG text element contains the fragment:

x="0" y="0"

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

---