繪製圓心 SVG 繪製圓形

本節我們來學習如何在 svg 中繪製圓形，圓形也是 svg 的基本形狀之一，我們可以通過元素來繪製原型。

要繪製圓形可以通過元素來實現，在繪製圓形時，我們需要確定這個圓的圓心及半徑。其中確定圓心需要用到cx屬性和cy屬性，半徑需要用到r屬性。除此之外，還可以使用fill屬性圓進行顏色填充，stroke屬性進行描邊等。

例如我們建立乙個圓：

這樣乙個圓形就建立好啦，效果如下

上述**中圓的圓心被設定為(100,60)，半徑被設定為50px，填充顏色為粉色，描邊顏色為紅色，邊的寬度為2px。

注意如果不設定圓心，則圓心會預設被設定為(0, 0)。

除了實現邊框，我們還可以給圓設定虛線邊框，這需要用到stroke-dasharray屬性。stroke-dasharray屬性帶有兩個值，第乙個值為短劃線，第二個值為缺口的長度，值之間使用空格隔開。

給圓設定虛線邊框：

在瀏覽器中的演示效果為：

可以看到，上圖中，圓的虛線邊框劃線長度為7px，缺口長度為3px，可以根據需要調整stroke-dasharray屬性的屬性值。

有些時候我們可能不想要設定圓的填充顏色，但是圓本身又帶有乙個黑色的填充色，如果我們想要去掉圓的填充顏色，只需要將fill屬性的值設定為none即可。

在瀏覽器中的演示效果為：

從上圖中可以看到，這樣就成功繪製了乙個沒有填充顏色的圓啦。