|
|
Consider the two text strings rendered in Figure 8.10.
Figure 8.10: A text string with a blur filter.
The SVG document in Listing 8.10 demonstrates how to use the SVG elements text and blur in order to render a text string with a blur filter.
Listing 8.10 blurFilterText1.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,100)"> <text x="0" y="0" fill="red" stroke="black" stroke-width="4" font-size="72"> Normal Text </text> <text x="0" y="100" filter="url(#blurFilter1)" fill="red" stroke="black" stroke-width="4" font-size="72"> Blurred Text </text> </g> </svg>
The SVG code in Listing 8.10 renders two horizontal text strings, both of which have a font-size of 72 and a fill value of red. The upper horizontal text string has a black border with a thickness of four pixels, while the lower horizontal text string references an element with a filter value of blurFilter1. This filter is defined in the SVG defs element and is a filter of type feGaussianBlur.
|
|