|
|
Consider the circle rendered in Figure 3.1.
Figure 3.1: A circle.
You can uniquely identify a circle by specifying its center point and its radius, as demonstrated in this example.
The SVG document in Listing 3.1 uses the SVG circle element in order to render a circle with radius 50.
Listing 3.1 circle1.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%"> <g transform="translate(200,100)"> <circle cx="100" cy="100" r="50" fill="red" stroke="blue" stroke-width="10"/> </g> </svg>
The SVG code in Listing 3.1 first translates the origin from the point (0,0) to the point (200,100). As a result, the center of the circle is shifted from (100,100), which is the point specified by (cx,cy) in the definition of the circle, to the point (300,200). The circle that is drawn has a radius of 50 pixels, which is the value assigned to the r attribute. The circle is filled with the color red, and the blue circumference has a thickness of 10 pixels.
Since circles are a special case of ellipses (or conversely, ellipses are a generalization of circles), you can use the SVG ellipse element to render circles. The SVG ellipse element is illustrated in the next example.
|
|