一篇文章教會你使用SVG畫圓形
SVG <circle> 元素是一個SVG的基本形狀，用來創(chuàng)建圓,基于一個圓心和一個半徑，同時可以利用stroke和fill屬性對圓進(jìn)行實線描邊，虛線描邊以及圓形的顏色填充等。
一、繪制圓形
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>元素用于繪制圓。
- <!DOCTYPE html>
- <html>
- <title>項目</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é)果：
該圓以點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畫不一樣的圓形，添加不一樣的效果。以及在實際開發(fā)項目中需要注意的點，遇到的一些難點， 都提供了一些有效等等解決方案。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。
本文轉(zhuǎn)載自微信公眾號「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號。
