一篇文章教會你使用SVG 畫圓形
點(diǎn)擊上方“前端進(jìn)階學(xué)習(xí)交流”，進(jìn)行關(guān)注
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
今
日
雞
湯
勸君莫惜金縷衣，勸君惜取少年時(shí)。SVG ?<circle> 元素是一個SVG的基本形狀，用來創(chuàng)建圓,基于一個圓心和一個半徑，同時(shí)可以利用stroke和fill屬性對圓進(jìn)行實(shí)線描邊，虛線描邊以及圓形的顏色填充等。
一、繪制圓形
1. SVG 命名空間
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"
這是XML鏈接語言[（XLink）規(guī)范中定義的XML命名空間。有關(guān) XML 的信息，請參閱可擴(kuò)展[標(biāo)記語言 （XML） 1.0 規(guī)范。
2. SVG <circle>元素用于繪制圓。
<html><title>項(xiàng)目</title><body style="background-color: aqua;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="60" cy="60" r="26" style="stroke:#006600; fill:#FF0000" /></svg></body></html>
運(yùn)行結(jié)果：
該圓以點(diǎn)cx , cy為圓心，半徑為r。cx，cy 和r是<circle>元素的屬性。
二、圓形描邊
使用SVG stroke樣式屬性設(shè)置SVG圓的筆觸（輪廓）。
筆劃設(shè)置為#006600深綠色。但是，不僅可以設(shè)置筆觸顏色，還可以設(shè)置更多。還可以使用stroke-widthstyle屬性設(shè)置筆觸寬度 。
示例
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke:#006600;stroke-width: 3;?????fill:#FF0000"
運(yùn)行后圓圈的外觀:
可以使用stroke-dasharray屬性以虛線繪制邊框。
<svg height="80px"><circle cx="40" cy="40" r="24"style="stroke:#006600;stroke-width: 3;stroke-dasharray: 10 5;fill:#FF0000"/></svg>
渲染后的外觀 :
刪除圓的邊框（輪廓），僅用填充顏色填充圓。
<svg height="80px"><circle cx="40" cy="40" r="24"style="stroke: none;fill:#FF0000"/></svg>
沒有邊框的圓運(yùn)行后效果如下:
三、Circle 填充
該fill樣式屬性控制圈的填充方式。通過將fill屬性設(shè)置為，可以選擇完全不填充none。示例如下:
<svg height="80px"><circle cx="40" cy="40" r="24"style="stroke: #660066;fill: none"/></svg>
這是沒有填充的圓的外觀
使用fill 屬性設(shè)置填充顏色。
代碼如下：
<svg height="80px"><circle cx="40" cy="40" r="24"style="stroke: #660066;fill: #FF0000"/></svg>
繪制圓并填充顏色的外觀如下:
使用fill-opacity style屬性將填充設(shè)置為透明。以下示例繪制了兩個圓，一個圓部分位于另一個圓的上方，并且是半透明的。
例
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke: #660000;fill: #cc0000;"></circle><circle cx="64" cy="40" r="24" style="stroke: #000099;fill: #0000cc;fill-opacity: 0.5;"></circle></svg>
運(yùn)行效果如下:
藍(lán)色（右）圓圈現(xiàn)在在內(nèi)部是半透明的。要使筆劃也為半透明，則必須使用stroke-opacitystyle屬性。
四、總結(jié)
本文基于Html基礎(chǔ)，利用SVG畫不一樣的圓形，添加不一樣的效果。以及在實(shí)際開發(fā)項(xiàng)目中需要注意的點(diǎn)，遇到的一些難點(diǎn)， 都提供了一些有效等等解決方案。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時(shí)候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_回復(fù)【入群】
萬水千山總是情，點(diǎn)個【在看】行不行