Lumination-Like Effects with Multi-Stop Radial Gradients

---

Circular and Elliptic Arcs

Consider the set of circular arcs in Figure 3.7.

Figure 3.7: A set of circular arcs.

In a language such as Java, you define a circular or an elliptic arc in terms of its width, the height, the start angle, the end angle, and the coordinates of the upper-left vertex of the smallest rectangle that bounds the circle or the ellipse. On the other hand, SVG requires that you specify a start point and an end point and then whether you want to render a major or a minor arc, either clockwise or counterclockwise.

The SVG document in Listing 3.7 defines a set of circular arcs.

Listing 3.7 circularArcs1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,20)">   <path d="M200,100 v-100 a100,100 0 0,0 -100,100 z"         fill="white" stroke="blue" stroke-width="2" /> </g> <g transform="translate(300,20)">   <path d="M200,100 v-100 a100,100 0 0,1 -100,100 z"         fill="green" stroke="blue" stroke-width="2" /> </g> <g transform="translate(50,350)">   <path d="M200,100 v-100 a100,100 0 1,0 -100,100 z"         fill="blue" stroke="blue" stroke-width="2" /> </g> <g transform="translate(300,220)">   <path d="M200,100 v-100 a100,100 0 1,1 -100,100 z"         fill="red" stroke="blue" stroke-width="2" /> </g> </svg>

Remarks

The SVG code in Listing 3.7 demonstrates how to use the SVG path element in order to draw circular arcs. The fill color of these elliptic arcs is white, green, blue, and red. All four circular arcs have a blue circumference with a thickness of two pixels. Before we examine the contents of the SVG path elements, notice that each circular arc is wrapped inside an SVG g element that specifies a transform attribute with a translate function. This is done for two reasons: first, you can move each elliptic arc independently of the others simply by changing the coordinates of the point in the translate function, and second, the SVG path elements for the circular arcs are virtually identically to each other.

The first portion of the first SVG path element consists of the following,

 <path d="M200,100

which specifies an absolute start point of (200,100) for the circular arc that will be rendered. The second portion of the four arcs consists of the following,

v-100

which specifies a vertical line segment with relative coordinates of (0,-100). Specifying this relative point has two consequences. First, a line segment of length 100 is drawn in the positive vertical (i.e., upward) direction. Second, this point represents the coordinates of the new 'start' point. The third portion of the four arcs consists of the following,

a100,100

which specifies that an elliptic arc is to be rendered. Both the major axis and the minor axis of this circular arc have length 100. Let's skip ahead to the last part of this line:

-100,100 z

This is a relative 'terminal' point of the elliptic arc that is to be rendered. Since the start point is the point with coordinates (100,100) as discussed above, the actual 'terminal' point is computed relative to the point (100,100). You can determine the coordinates of the terminal point simply by adding the x-coordinates and the
y-coordinates together as follows: (100,100) + (-100,100) = (0,200). Note that the final 'z' in the SVG path element specifies that the final point must be connected to the initial point (in this case, the initial point is M200,100) with a line segment.

The intermediate portion of the SVG path element consists of three numbers-for example, 0 0,0. The first integer represents a rotation value, and since it is equal to zero in all four cases, there is no rotation.

At this point, all that remains is to understand the purpose of the comma-separated pair of integers. This pair of integers specifies a combination of an 'arc type' (i.e., major arc versus minor arc) and rotation (i.e., clockwise versus counterclockwise). A value of zero for the first integer specifies a minor arc, and a value of 1 specifies a major arc. A value of zero for the second integer specifies counterclockwise, and a value of 1 for the second integer specifies clockwise. Confusing? The next section summarizes the preceding information so that you can use it as a handy reference.

---