Using an SVG circle Element to Render Circles | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Using an SVG ellipse Element to Render Ellipses

Consider the ellipse rendered in Figure 3.2.

click to expand
Figure 3.2: An ellipse.

You can uniquely identify a circle by specifying its center point (cx,cy), its major axis rx, and its minor axis ry.

The SVG document in Listing 3.2 uses the SVG ellipse element in order to render an ellipse with center (100,100), a (horizontal) major axis of length 80 pixels, and a (vertical) minor axis of 50 pixels.

Listing 3.2 simpleEllipse1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%">     <ellipse cx="120" cy="80"              rx="80" ry="30"              style="fill:rgb(255,0,0)"/>     <ellipse cx="130" cy="170"              rx="80" ry="30"              style="fill:black"/>     <ellipse cx="120" cy="160"              rx="80" ry="30"              stroke="blue"              stroke-width="8"              stroke-dasharray="1 1 1 1"              style="fill:rgb(255,0,0)"/> </svg>

Remarks

The SVG code in Listing 3.2 contains three ellipses. The top ellipse is an unadorned red ellipse, and the second ellipse serves as a black background for the third ellipse in order to create a shadow effect.

The first ellipse has a center point of (120,80), a horizontal major axis of length 80 pixels, and a vertical minor axis of length 50 pixels. Notice that the fill attribute is specified in terms of the (R, G, B) triple of (255,0,0), which is the color red. You can also specify the same fill color (in this case, red) by using a string of six hexadecimal digits or by using the standard color name for red as given below:

style="fill:red"/> style="fill:#FF0000"/>

Notice that if we had specified rx = ry = 80, then the rendered ellipse would actually be a circle.

The second ellipse is black and is rendered by a horizontal and vertical offset of 10 pixels in order to create a black background for the third ellipse; the latter is red and has a blue dotted circumference, as shown below:

stroke="blue" stroke-width="8" stroke-dasharray="1 1 1 1" style="fill:rgb(255,0,0)"/>