[SVG] How to draw a circle?

| Web Design | 1k+ Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/544

Code:

<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="transparent" />
</svg> 
  • "cx" and "cy" are used to determine the position of the center of the circle.
  • "r" is used to determine the radius of the circle.
  • "stroke" is used to determine the color of the edge of the circle.
  • "stroke-width" is used to determine the thickness of the edge of the circle.
  • "fill" is used to determine the color filled in the circle.

Here is what the above code looks like in HTML5:

   

You can accurately see that this is a circle with a center at (100, 50) and a radius of 40. It is a black circle with a thickness of 2 and the filling is transparent.

Next: [SVG] How to draw a rectangle?

This article was last edited at