Using an feFlood Filter Primitive

   



Using an feImage Filter Primitive

Consider the image rendered in Figure 7.5.

click to expand
Figure 7.5: An feImage filter primitive.

The SVG document in Listing 7.5 demonstrates how to use an feImage filter primitive that references an external image.

Listing 7.5 imageFilter1.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">      <feImage xlink:href="simpleHouse1.gif"        x="0" y="0"        width="100" height="100"        result="outputImage1"/>   </filter>   <filter            filterUnits="objectBoundingBox"      x="0" y="0" width="100" height="100">      <feImage xlink:href="simpleHouse1.gif"        x="200" y="0"        width="200" height="50"        result="outputImage2"/>   </filter>   </defs> <g transform="translate(50,50)">   <rect      x="0" y="0" width="100" height="100"      filter="url(#feImageFilter1)"/>   <rect      x="150" y="0" width="100" height="100"      filter="url(#feImageFilter2)"/> </g> </svg>
end example

Remarks

The SVG code in Listing 7.5 renders an external GIF file and a scaled version of the same GIF file. The code starts with an SVG defs element that contains the definition of the filter (and its nested filter primitive) given below:

<filter          filterUnits="objectBoundingBox"      x="0" y="0" width="100" height="100">      <feImage xlink:href="simpleHouse1.gif"        x="0" y="0"        width="100" height="100"        result="outputImage1"/> </filter>

This filter specifies a rectangle with a width of 100 pixels and a height of 100 pixels whose upper-left vertex is the origin. Notice how the GIF file itself is specified in the feImage filter primitive in the following fragment:

<feImage xlink:href="simpleHouse1.gif"     x="0" y="0"     width="100" height="100"     result="outputImage1"/>

On the other hand, the rectangle in the second filter has a width of 200 pixels and a height of 50 pixels whose upper-left vertex is the point (200,100). The code for the second filter (and its nested filter primitive) is:

<filter      filterUnits="objectBoundingBox"   x="0" y="0" width="100" height="100">   <feImage xlink:href="simpleHouse1.gif"     x="200" y="0"     width="200" height="50"     result="outputImage2"/> </filter> </defs>

One other detail to observe is the result attribute that appears in both of the feImage filter primitives. The value of this attribute essentially provides a reference whereby the output of the current filter primitive can be used as the input for other filter primitives, thereby enabling you to create a chaining effect.



   



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