Venetian Checkerboards and Quadratic Bezier Clip Paths

   



Rendering Cubic Bezier Curves

Consider the cubic Bezier curves rendered in Figure 5.4.

click to expand
Figure 5.4: A pair of cubic Bezier curves.

The SVG document in Listing 5.4 demonstrates how to use the SVG path element in order to render a pair of cubic Bezier curves.

Listing 5.4 cBezier1.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%">   <g transform="translate(20,40)">   <path      d="M0,0 C20,100 20,-200 400,200"      fill="#880088"      stroke-dasharray="4 4 4 4"      style="stroke:yellow;stroke-width:16;"/>   </g>   <g transform="translate(0,80)">   <path      d="M150,150 C0,0 20,250 400,250"      stroke-dasharray="8 4 8 4"      fill="red"      style="stroke:blue;stroke-width:12;"/>   </g> </svg>
end example

Remarks

The two SVG path element contain the terms C20,100 and C0,0, respectively, which signals the presence of cubic Bezier curves. Let's take a look at the code that specifies the first cubic Bezier curve:

d="M0,0 C20,100 20,-200 400,200"

The start point of the Bezier curve is the point (0,0) because of the term M0,0, and the terminal point of the Bezier curve is the point (400,200) which is listed at the end of the code fragment. The fragment C20,100 20,250 specifies two control points (20,100) and (20,250) that are used for drawing the start and end of the Bezier curve, respectively. Remember the rule in SVG: uppercase letters refer to absolute points whereas lowercase letters refer to relative points.

The SVG attributes fill, stroke-dasharray, stroke, and stroke-width-experiment with these attributes to create your own visual effects. Remember that SVG allows you to use hexadecimal-based values for the fill attribute (in this example, fill is #880088); consequently, you have a tremendous number of subtle color shades at your disposal.



   



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