Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

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.svg—A Simple SVG Ellipse

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
<svg width="400" height="300">
<ellipse cx="200" cy="100" rx="150" ry="50"
 style="stroke:#FF0000; stroke-width:2; fill:#FFFFFF"/>

An ellipse element may be animated by any of the SVG animation elements—animate, set, animateColor, animateMotion, or animateTransform—which are described in Chapter 11.

  • + Share This
  • 🔖 Save To Your Account