Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Drawing a Circle
The circle is drawn using the circle
tag. Code example:
<circle r="50"/>
The r
attribute determines the radius of the circle.
Unlike the previous shapes we covered, the position of the circle in space is determined by the coordinates of the center of the shape: the cx
attribute is used to set the position along the horizontal axis, and cy
is used to set the position along the vertical axis.
By default, the circle’s center coordinates are 0.0
, so it is located in the upper left corner. Move the shape:
<circle r="50" cx="100" cy="50%"/>
Values can be specified either using pixels or percentages. Percentages are calculated relative to the dimensions of the SVG element.
The radius and coordinates can only be specified using attributes, and you cannot do this using CSS.
- object.svg
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
- Draw a circle with a radius of
10
and a center (cx
) with a horizontal axis offset of50
, a vertical axis (cy
) offset of50%
, and a fill color ofcrimson
. - Draw a second circle with the following properties: radius –
30
,cx
=105
,cy
=50%
, fill color –orangered
. - And finally draw a third circle with the properties: radius —
50
,cx
=200
andcy
=50%
, fill color —gold
.
Comments