The ellipse Element
The circle element is adequate to describe a circle but is inadequate to describe an ellipse because an ellipse has two radii, an x radius and a y radius. The SVG ellipse element is used to describe an ellipse. The center of the ellipse is described, as with the circle element, using a cx and a cy attribute. The x radius of an ellipse is described using an rx attribute, and the y radius is described using an ry attribute. Listing 3.11 shows how we can describe a simple ellipse using the ellipse element.
Listing 3.11 SimpleEllipse.svgA Simple SVG Ellipse
<?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="400" height="300"> <ellipse cx="200" cy="100" rx="150" ry="50" style="stroke:#FF0000; stroke-width:2; fill:#FFFFFF"/> </svg>
An ellipse element may be animated by any of the SVG animation elementsanimate, set, animateColor, animateMotion, or animateTransformwhich are described in Chapter 11.