Chapter 3: Circles, Ellipses, and path Elements

   



Using an SVG circle Element to Render Circles

Consider the circle rendered in Figure 3.1.


Figure 3.1: A circle.

You can uniquely identify a circle by specifying its center point and its radius, as demonstrated in this example.

The SVG document in Listing 3.1 uses the SVG circle element in order to render a circle with radius 50.

Listing 3.1 circle1.svg

start example
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"> <g transform="translate(200,100)">   <circle cx="100" cy="100" r="50"           fill="red" stroke="blue" stroke-width="10"/> </g> </svg> 
end example

Remarks

The SVG code in Listing 3.1 first translates the origin from the point (0,0) to the point (200,100). As a result, the center of the circle is shifted from (100,100), which is the point specified by (cx,cy) in the definition of the circle, to the point (300,200). The circle that is drawn has a radius of 50 pixels, which is the value assigned to the r attribute. The circle is filled with the color red, and the blue circumference has a thickness of 10 pixels.

Since circles are a special case of ellipses (or conversely, ellipses are a generalization of circles), you can use the SVG ellipse element to render circles. The SVG ellipse element is illustrated in the next example.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net