[Translate the circle element in the SVG tutorial]svg

The elements in SVG <circle> are used to draw circles, for example

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <circle cx= "Cy=" "r=" "style=" Stroke: #006600; Fill: #00cc00 "/></svg>

The effect is as follows

Property Description Cx,cy Set Center, R set Radius

Rounded border

You can set the border of a circle by setting the style

For example

<circle cx= "cy=", "r=", "    style=" Stroke: #006600;           Stroke-width:3;           Fill: #00cc00 "/>

Property describes             the color of the stroke border

        Stroke-width       width of border

        Fill               Fill Color

The effect is as follows

stroke-dasharray  

For example
<circle cx= "cy=", "r=", "    style=" Stroke: #006600;           Stroke-width:3;           Stroke-dasharray:10 5;           Fill: #00cc00 "/>

You can also disable borders such as
<circle cx= "" "Cy=" "" "r="           style= "Stroke:none" Fill: #00cc00 "/>

Effect

Round fill

The Fill property in the style is used to set how the circle fills, and if you don't want the circle to be filled, set fill to None

For example, this is a no-fill effect

<circle cx= "cy=", "r=", "    style=" Stroke: #00600;           Fill:none "/>

This is an example of a fill color

<circle cx= "cy=", "r=", "    style=" Stroke: #660066;           Fill: #00ff00 "/>

You can also fill-opacity set the transparency by

For example two pieces of circle overlap together

<circle cx= "cy=", "r=", "    style=" Stroke: #660000;           Fill: #cc0000 "/><circle cx=" "cy=" "r=" "    style=" Stroke: #000066;           Fill: #0000cc "           fill-opacity:0.5/>

[Translate the circle element in the SVG tutorial]svg