Quadratic Bezier Curves and feTurbulence Filter Primitives

   



feGaussianBlur Filter Triangles and Quadratic Bezier Curves

Consider the image rendered in Figure 7.10.

click to expand
Figure 7.10: A blur filter triangle pattern with a quadratic Bezier curve.

The SVG document in Listing 7.10 demonstrates how to combine an SVG filter element, a quadratic Bezier curve, and an SVG pattern element.

Listing 7.10 triangleBlurFilterQBCP1.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="60" height="15">      <feGaussianBlur stdDeviation="8"/>   </filter>   <clipPath              clipPathUnits="userSpaceOnUse">     <path d="m0,0 Q100,0 200,200 T300,200"           style="fill:red;stroke:blue;stroke-width:4;"/>   </clipPath>   <pattern             width="60" height="30"            patternUnits="userSpaceOnUse">      <polygon         points="0,0 60,0 60,30"         filter="url(#blurFilter1)"         fill="red" stroke="black" stroke-width="4"/>    </pattern> </defs> <g transform="translate(20,20)"   clip-path="url(#clipPathDefinition)"              stroke="black" fill="none">   <rect      style="fill:url(#multiPattern)"      x="0" y="0" width="600" height="300"/> </g> </svg>
end example

Remarks

The SVG code in Listing 7.10 generates a rectangular pattern of blurred triangles that are enclosed by an SVG clip-path element that is defined by a quadratic Bezier curve. The image is visually pleasing because the filter blurs the perimeter of the rectangles and also because of the non-linear flow of the quadratic Bezier
curve.

The SVG code in Listing 7.10 contains an SVG defs element that defines three elements: an feGaussianBlur filter primitive, an SVG clip-path element that defines a quadratic Bezier curve, and an SVG pattern element consisting of a triangle with the previously defined feGaussianBlur filter primitive applied to it. You can refer to previous examples for a detailed discussion of these three elements.



   



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