本節我們來學習如何在 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>
在瀏覽器中的演示效果爲： 
從上圖中可以看到，這樣就成功繪製了一個沒有填充顏色的圓啦。