<circle> SVG 元素是一個(gè)SVG的基本形狀，用來創(chuàng)建圓,基于一個(gè)圓心和一個(gè)半徑，同時(shí)可以利用stroke和fill屬性對(duì)圓進(jìn)行實(shí)線描邊，虛線描邊以及圓形的顏色填充等。
SVG <circle>元素用于繪制圓。這是一個(gè)簡(jiǎn)單的示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> </svg>測(cè)試看看 ?/?
這是運(yùn)行結(jié)果圖像
該圓以點(diǎn)cx , cy為圓心，半徑為r。cx，cy 和r是<circle>元素的屬性。
您可以使用SVG stroke樣式屬性設(shè)置SVG圓的筆觸（輪廓）。在此頁面上的第一個(gè)示例中，筆劃設(shè)置為#006600深綠色。但是，您不僅可以設(shè)置筆觸顏色，還可以設(shè)置更多。您還可以使用stroke-widthstyle屬性設(shè)置筆觸寬度 。這是一個(gè)示例:
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke:#006600; stroke-width: 3; fill:#00cc00"/></svg>測(cè)試看看 ?/?
這是運(yùn)行后圓圈的外觀:
您也可以使用stroke-dasharray屬性以虛線繪制邊框。這是一個(gè)示例:
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke:#006600; stroke-width: 3; stroke-dasharray: 10 5; fill:#00cc00"/></svg>測(cè)試看看 ?/?
這是渲染后的外觀:
您也可以刪除圓的邊框（輪廓），僅用填充顏色填充圓。示例代碼如下:
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke: none; fill:#00cc00"/></svg>測(cè)試看看 ?/?
沒有邊框的圓運(yùn)行后效果如下:
該fill樣式屬性控制圈的填充方式。通過將fill屬性設(shè)置為，可以選擇完全不填充none。
示例如下:
這是沒有填充的圓的外觀:
您可以使用fill 屬性設(shè)置填充顏色，如本文前面所述，示例代碼如下:
<svg height="80px"><circle cx="40" cy="40" r="24" style="stroke: #660066; fill: #00ff00"/></svg>測(cè)試看看 ?/?
繪制圓并填充顏色的外觀如下:
您還可以使用fill-opacity style屬性將填充設(shè)置為透明。以下示例繪制了兩個(gè)圓，一個(gè)圓部分地位于另一個(gè)圓的上方，并且是半透明的。
<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>測(cè)試看看 ?/?
運(yùn)行效果如下:
請(qǐng)注意，藍(lán)色（右）圓圈現(xiàn)在在內(nèi)部是半透明的。要使筆劃也為半透明，則必須使用stroke-opacitystyle屬性。