本节我们来学习如何在 SVG 中绘制圆形，圆形也是 SVG 的基本形状之一，我们可以通过 <circle> 元素来绘制原型。
如何绘制一个圆形
要绘制圆形可以通过 <circle> 元素来实现，在绘制圆形时，我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性，半径需要用到 r 属性。除此之外，还可以使用 fill 属性圆进行颜色填充，stroke 属性进行描边等。
示例：
例如我们创建一个圆：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<circle cx="100" cy="60" r="50" style="fill:pink; stroke:red; stroke-width:2;"/>
</svg>
</body>
</html>
这样一个圆形就创建好啦，效果如下 
上述代码中圆的圆心被设置为 (100,60)， 半径被设置为 50px，填充颜色为粉色，描边颜色为红色，边的宽度为 2px。
注意如果不设置圆心，则圆心会默认被设置为 (0, 0)。
为圆设置虚线边框
除了实现边框，我们还可以给圆设置虚线边框，这需要用到 stroke-dasharray 属性。stroke-dasharray 属性带有两个值，第一个值为短划线，第二个值为缺口的长度，值之间使用空格隔开。
示例：
给圆设置虚线边框：
<svg>
<circle cx="100" cy="60" r="50" style="fill:pink; stroke:red; stroke-dasharray:7 3; stroke-width:2;"/>
</svg>
在浏览器中的演示效果为： 
可以看到，上图中，圆的虚线边框划线长度为 7px，缺口长度为 3px，可以根据需要调整 stroke-dasharray 属性的属性值。
去掉填充颜色
有些时候我们可能不想要设置圆的填充颜色，但是圆本身又带有一个黑色的填充色，如果我们想要去掉圆的填充颜色，只需要将 fill 属性的值设置为 none 即可。
示例：
<svg>
<circle cx="100" cy="60" r="50" style="fill:none; stroke:red; stroke-width:2;"/>
</svg>
在浏览器中的演示效果为： 
从上图中可以看到，这样就成功绘制了一个没有填充颜色的圆啦。