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; ... |
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
