溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用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屬性。
以上是“如何使用SVG畫圓形”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
