Displaying Text with Opacity

   



Displaying Text with blur Filters

Consider the two text strings rendered in Figure 8.10.

click to expand
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

start example
<?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> 
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net