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

SVG

CSS

svg { border: 1px solid #dddddd; }

Goalscompleted

Draw a circle with a radius of 10 and a center (cx) with a horizontal axis offset of 50, a vertical axis (cy) offset of 50%, and a fill color of crimson.
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 and cy = 50%, fill color — gold.

Drawing a Circle

Comments

Log in

Sign up

Restore access