SVG如何繪製圓形

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

如何繪製乙個圓形

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

示例：例如我們建立乙個圓：

>
>
charset
="utf-8"
>
>
svg學習(9xkd.com)title
>
rel=
"stylesheet"
type
="text/css"
href
="./style.css"
>
head
>
>

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

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

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

為圓設定虛線邊框

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

示例：給圓設定虛線邊框：

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

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

去掉填充顏色

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

示例：

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

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