|
|
Consider the image rendered in Figure 7.5.
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
<?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>
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.
|
|