This chapter is from the book
This chapter is from the book
This chapter is from the book
The circle Element
Circular objects may appear in many graphics, whether as functional parts of an object or as decorative additions. In maps, a circle may be used as a simple representation of a traffic circle, for example.
NOTE
Strictly speaking, the circle element is not needed in SVG because a circle can be described as an ellipse element (described in the next section), which has equal values for its rx and ry attributes.
The circle element, not surprisingly, is used to produce circles. If you studied basic geometry, you may remember that a circle is completely described if the position of its center and its radius are both known. In the SVG circle element, the x coordinate of the center of the circle is denoted by the cx attribute, the y coordinate of the center is denoted by the cy attribute, and the radius is denoted by the r attribute. As well as the essential geometric information, we can also add style information. Thus, to define a circle of radius 50, centered at coordinates 100,100, we can use the code in Listing 3.10.
Listing 3.10 FirstCircle.svg—A Circle in SVG
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="" height=""> <circle cx="100" cy="100" r="50" style="stroke:#FF0000; stroke-width:2; fill:#CCCCFF"/> </svg>
As you can see in Figure 3.9, which is zoomed and panned, we produce a circle whose outline color differs from its fill color.
){kind=link}
Figure 3.9 A simple circle in SVG.
A circle element may be animated by any of the SVG animation elements—animate, set, animateColor, animateMotion, or animateTransform—which are described in Chapter 11.