|
|
Consider the set of scaled cubic Bezier curves rendered in Figure 6.5.
Figure 6.5: A set of scaled cubic Bezier curves.
The SVG document in Listing 6.5 demonstrates how to render a set of scaled cubic Bezier curves with a zipper effect.
Listing 6.5 multiScaledCBezier3.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> <linearGradient x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:#FFFFFF"/> <stop offset="80%" style="stop-color:#FFFF00"/> <stop offset="100%" style="stop-color:#0000AA"/> </linearGradient> </defs> <g transform="translate(20,20) scale(2)"> <path d="M0,0 C75,150 150,10 10,80" fill="url(#gradientDefinition1)" stroke-dasharray="4 4" style="stroke:red;stroke-width:4;"/> </g> <g transform="translate(40,80) scale(2.5)"> <path d="M0,0 C75,150 150,10 10,80" fill="url(#gradientDefinition1)" stroke-dasharray="4 4" style="stroke:green;stroke-width:2;"/> </g> <g transform="translate(80,140) scale(3)"> <path d="M0,0 C75,150 150,10 10,80" fill="url(#gradientDefinition1)" stroke-dasharray="4 4" style="stroke:blue;stroke-width:3;"/> </g> <g transform="translate(120,200) scale(3.5)"> <path d="M0,0 C75,150 150,10 10,80" fill="url(#gradientDefinition1)" stroke-dasharray="4 4" style="stroke:black;stroke-width:8;"/> </g> </svg>
The code in Listing 6.5 contains four SVG g elements, each of which contains the SVG translate function and the SVG scale element, as well as a fill attribute with a value of gradientDefinition1 that references a linear color gradient that is defined in the SVG defs element.
Since all four SVG g elements render a scaled version of the same cubic Bezier function, we'll only examine the first one in detail. The first SVG g element specifies a red cubic Bezier curve whose blue 'dotted' outline has a width of four because of the following code fragment:
stroke-dasharray="4 4" style="stroke:red;stroke-width:4;"/>
The cubic Bezier curve itself is specified by the following line of code:
d="M0,0 C75,150 150,10 10,80"
The starting 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 (10,80) which is listed at the end of the code fragment. Next, the fragment C75,150 150,10 specifies two control points (75,150) and (150,10) that are used for rendering the cubic Bezier curve. The control point (75,150) is used for drawing the beginning of the Bezier curve and the control point (150,10) is used for drawing the end of the Bezier curve.
Note that the uppercase letters M and C in a cubic Bezier curve refer to absolute points whereas the lowercase letters m and c refer to relative points.
|
|