Using an feTurbulence Filter Primitive

---

feTurbulence Filter Primitives and pattern Elements

Consider the image rendered in Figure 7.8.

Figure 7.8: An feTurbulence filter primitive and an SVG pattern.

The SVG document in Listing 7.8 demonstrates how to use the SVG pattern and linearGradient elements in combination with an feTurbulence filter primitive in order to create a grid-like turbulence pattern.

Listing 7.8 turbulenceFilterGrid1.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%">        <feTurbulence in="sourceAlpha"                      type="turbulence"                      baseFrequency="0.1"                      numOctaves="1"                      seed="0">        </feTurbulence>   </filter>   <linearGradient       x1="0" y1="0" x2="40" y2="40"      gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient>   <pattern             width="40" height="40"            patternUnits="userSpaceOnUse">      <rect fill="url(#gradientDefinition)"            x="0"  y="0"            style="opacity:0.2"            width="40" height="40"/>   </pattern>   </defs> <g>   <rect      x="0" y="0" width="800" height="400"      style="filter:url(#filter1)"/>   <rect      fill="url(#checkerPattern)"      style="stroke:red"      x="1" y="1" width="800" height="400"/> </g> </svg>

Remarks

The SVG code in Listing 7.8 contains an SVG defs element that defines a filter containing an feTurbulence filter primitive, a linear color gradient, and an SVG pattern element that references the linear color gradient. The following code fragment renders the graphics image:

<g>   <rect      x="0" y="0" width="800" height="400"      style="filter:url(#filter1)"/>   <rect      fill="url(#checkerPattern)"      style="stroke:red"      x="1" y="1" width="800" height="400"/> </g>

The first portion of the SVG code renders an SVG rect element that references an feTurbulence filter primitive, whose id attribute has value filter1, which is defined in the SVG defs element.

Next, the SVG code renders a rectangular grid of rectangles by specifying an SVG rect element that references an SVG pattern element, whose id attribute has value checkerPattern, which is also defined in the SVG defs element.

The combined effect of this combination is probably different from what you expected; indeed, this example demonstrates that you cannot always predict how filter primitives will 'interact' with other user-defined patterns.

The key idea behind this graphics image is to specify an opacity attribute whose value is less than one. You can convince yourself that this is the case simply by setting the value of the opacity attribute to one, which will completely mask the feTurbulence filter primitive. You can experiment with other values for the opacity attribute to find other interesting combinations of an feTurbulence filter primitive and the SVG pattern element.

---