How to draw a circle using SVG

Editor to share with you how to use SVG to draw circles, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The SVG element is the basic shape of a SVG, which is used to create a circle based on a center and a radius. At the same time, you can use the stroke and fill attributes to stroke the circle with solid lines, dotted lines, and color fills the circle.

Draw a circle

1. SVG Namespace

# xmlns= "http://www.w3.org/2000/svg" # xmlns:xlink=" http://www.w3.org/1999/xlink"

This is the XML namespace defined in the XML linking language [(XLink) specification. For information about XML, see Extensible markup language (XML) 1.0 specification.

2. The SVG element is used to draw circles.

Project

Running result:

The circle is centered on points cx and cy and has a radius of r. Cx,cy and r are attributes of the element.

Circular Stroke

Use the SVG stroke style property to set the stroke (outline) of the SVG circle.

The stroke is set to # 006600 dark green. However, you can set not only the stroke color, but also more. You can also set the stroke width using the stroke-widthstyle property.

Example