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