Creating an feGaussianBlur Filter Pattern

---

Using an feFlood Filter Primitive

Consider the image rendered in Figure 7.4.

Figure 7.4: An feFlood filter primitive.

The SVG document in Listing 7.4 demonstrates how to use an SVG filter element with an feFlood filter primitive.

Listing 7.4 floodFilter1.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%">      <feFlood flood-color="blue" flood-opacity="1"/>   </filter>   <filter            filterUnits="objectBoundingBox"      x="0" y="0"      width="100%" height="100%">      <feFlood flood-color="blue" flood-opacity=".5"/>   </filter>   <filter            filterUnits="objectBoundingBox"      x="0" y="0"      width="100%" height="100%">      <feFlood flood-color="blue" flood-opacity=".1"/>   </filter>   <rect       width="100" height="100"      fill="red" stroke="black" stroke-width="4"/>   </defs>  <g transform="translate(50,50)">   <use xlink:href="#refRect1" x="50" y="50"/>   <rect      x="0"   y="0" width="100" height="100"      filter="url(#floodFilter1)"      fill="red" stroke="black" stroke-width="4"/>   <use xlink:href="#refRect1" x="250" y="50"/>   <rect      x="200" y="0" width="100" height="100"      filter="url(#floodFilter2)"      fill="red" stroke="black" stroke-width="4"/>   <use xlink:href="#refRect1" x="450" y="50"/>   <rect      x="400" y="0" width="100" height="100"      filter="url(#floodFilter3)"      fill="red" stroke="black" stroke-width="4"/>  </g>  </svg>

Remarks

The SVG code in Listing 7.4 starts with an SVG defs element that contains the definition of three feFlood filter primitives that differ only by their opacity. The code for the first feFlood filter primitive is:

<filter        filterUnits="objectBoundingBox"    x="0" y="0"    width="100%" height="100%">    <feFlood flood-color="blue" flood-opacity="1"/> </filter>

If you look at the rendered graphics image, you'll see that the output that corresponds to this filter primitive looks like a blue rectangle.

The SVG g element contains an SVG translate function that shifts the origin from the point (0,0) to the point (50,50). Then, the SVG g element renders three pairs of overlapping rectangles. Now let's look at the code for the first pair of rectangles. The first rectangle (in the first pair) is rendered by referencing a rectangle defined in the SVG defs element by means of the following line of code:

<use xlink:href="#refRect1" x="50" y="50"/>

The second rectangle in the overlapping (first pair) of rectangles is drawn with the following code fragment:

<rect    x="0"   y="0" width="100" height="100"    filter="url(#floodFilter1)"    fill="red" stroke="black" stroke-width="4"/>

The second rectangle contains a filter attribute whose value is floodFilter1, which references an feFlood filter primitive that is defined in the SVG defs element.

In a similar fashion, the SVG g element renders two more pairs of overlapping rectangles, each of which contains a different value for the opacity attribute.

---