HTML and CSS Reference
In-Depth Information
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<circle r=”150” stroke=”yellow”
stroke-width=”5” fill=”red”/>
</svg>
Figure 3.12 shows the results of the CIRCLE element in more
detail.
As you can see in the figure, defining only the radius forces
most of the circle to drop off the top-left corner of the browser
window. To correct this you can use two additional, optional attri-
butes,
CX
and
CY
, to define the X and Y axes positions of the circle
on the screen.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”160” cy=”160” r=”150” stroke=”yellow”
stroke-width=”5” fill=”red”/>
</svg>
Figure 3.13 shows the use of these attributes.
Figure 3.12
The CIRCLE element allows you to draw circles on the screen.
