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

The <circle> Element

A circle, at least in geometry, is completely described by its radius and the coordinates of its center. In SVG too, those are the most important attributes of a <circle> element. In addition, of course, it has a style attribute with various CSS properties you can use.

Listing 3.12. (ThreeCircles.svg)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg width="300" height="200"> 
<circle cx="50" cy="100" r="40" 
style="fill:#000099; stroke:#FF0099; 
fill-opacity:0.1;"/> 
<circle cx="150" cy="100" r="40" 
style="fill:#000099; stroke:#FF0099; 
fill-opacity:0.5;"/> 
<circle cx="250" cy="100" r="40" 
style="fill:#000099; stroke:#FF0099; 
fill-opacity:1;"/> 
</svg> 


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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