Specifying Circular and Elliptic Arcs | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Coloring Elliptic Arcs

Figure 3.8 portrays a set of colored elliptic arcs that form an ellipse.

click to expand
Figure 3.8: Colored elliptic arcs.

The SVG document in Listing 3.8 defines four colored elliptic arcs that form an ellipse.

Listing 3.8 ellipticArcSegments2.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(20,20)">   <!-- upper-left quadrant -->   <path d="M100,100 A150,50 0 0,1 250,50"         fill="black" stroke="red" stroke-width="8"/>   <!-- upper-right quadrant -->   <path d="M250,50 A150,50 0 0,1 400,100"         fill="black" stroke="green" stroke-width="8"/>   <!-- lower-right quadrant -->   <path d="M400,100 A150,50 0 0,1 250,150"         fill="black" stroke="blue" stroke-width="8"/>   <!-- lower-right quadrant -->   <path d="M250,150 A150,50 0 0,1 100,100"         fill="black" stroke="yellow" stroke-width="8"/> </g> </svg>

Remarks

The SVG code in Listing 3.8 demonstrates how to use the SVG path element in order to draw a set of elliptic arcs. Consider the points in the first SVG path element:

<path d="M100,100 A150,50 0 0,1 250,50"

The letter M specifies an absolute start point of (100,100) with an elliptic arc having a horizontal axis of length 150 and vertical axis of length 50. The final point has coordinates (250,50). A 'minor' elliptic arc is drawn clockwise from the start point to the final point. In a similar fashion, the other three SVG path elements define elliptic 'quarter' arcs (as indicated by the comment lines) which, together with the first elliptic arc, comprise an ellipse. Notice how the elliptic arcs represent minor arcs that are rendered in a clockwise fashion; hence, all four SVG path elements have the element 0,1 immediately prior to the end point of the path, which is consistent with the information you saw in a previous section regarding minor/major sectors.