Using Multiple SVG scale Elements

   



Zipper Effects and Scaled Cubic Bezier Curves

Consider the set of scaled cubic Bezier curves rendered in Figure 6.5.

click to expand
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

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>   <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>
end example

Remarks

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.



   



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