• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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"
"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>


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint