一篇文章教會你使用SVG畫圓形
SVG <circle> 元素是一個SVG的基本形狀，用來創建圓,基于一個圓心和一個半徑，同時可以利用stroke和fill屬性對圓進行實線描邊，虛線描邊以及圓形的顏色填充等。
一、繪制圓形
1. SVG 命名空間
- # xmlns="http://www.w3.org/2000/svg"
- # xmlns:xlink="http://www.w3.org/1999/xlink"
這是XML鏈接語言[（XLink）規范中定義的XML命名空間。有關 XML 的信息，請參閱可擴展[標記語言 （XML） 1.0 規范。
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>
運行結果：
該圓以點cx , cy為圓心，半徑為r。cx，cy 和r是<circle>元素的屬性。
二、圓形描邊
使用SVG stroke樣式屬性設置SVG圓的筆觸（輪廓）。
筆劃設置為#006600深綠色。但是，不僅可以設置筆觸顏色，還可以設置更多。還可以使用stroke-widthstyle屬性設置筆觸寬度 。
示例
- <svg height="80px">
- <circle cx="40" cy="40" r="24" style="stroke:#006600;
- stroke-width: 3;
- fill:#FF0000"
運行后圓圈的外觀:
可以使用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>
沒有邊框的圓運行后效果如下:
三、Circle 填充
該fill樣式屬性控制圈的填充方式。通過將fill屬性設置為，可以選擇完全不填充none。示例如下:
- <svg height="80px"><circle cx="40" cy="40" r="24"
- style="stroke: #660066;
- fill: none"/>
- </svg>
這是沒有填充的圓的外觀
使用fill 屬性設置填充顏色。
代碼如下：
- <svg height="80px"><circle cx="40" cy="40" r="24"
- style="stroke: #660066;
- fill: #FF0000"/>
- </svg>
繪制圓并填充顏色的外觀如下:
使用fill-opacity style屬性將填充設置為透明。以下示例繪制了兩個圓，一個圓部分位于另一個圓的上方，并且是半透明的。
例
- <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>
運行效果如下:
藍色（右）圓圈現在在內部是半透明的。要使筆劃也為半透明，則必須使用stroke-opacitystyle屬性。
四、總結
本文基于Html基礎，利用SVG畫不一樣的圓形，添加不一樣的效果。以及在實際開發項目中需要注意的點，遇到的一些難點， 都提供了一些有效等等解決方案。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助讀者更好的去學習SVG。
本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。
