SVG Circle Element

The SVG <circle> element is used to draw circle. The center point and radius are given.

Syntax:

<circle
   cx="x-axis co-ordinate"
   cy="y-axis co-ordinate"
   r="length" >   
</circle>

Attributes:

cx: x-axis co-ordinate of the center.
cy: y-axis co-ordinate of the center
r: Radius of the circle.

Example:

html

<!DOCTYPE html> 

<html> 

    <body> 

        <svg width="200" height="200"> 

            <circle cx="80" cy="80" r="50" 

                    stroke="black" 

                    stroke-width="2" 

                    fill="grey" /> 

        </svg> 

    </body> 

</html>

Output:

Example: Change the opacity

html

<!DOCTYPE html> 

<html> 

    <body> 

        <svg width="200" height="200"> 

            <circle cx="80" cy="80"

                    r="50" stroke="black" 

                    stroke-width="2" 

                    fill="grey"

                    opacity="0.5" /> 

        </svg> 

    </body> 

</html>

Output:

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element