如何使用SVG畫圓形

發(fā)布時(shí)間：2021-09-06 14:50:16 來源：億速云閱讀：207 作者：小新欄目：web開發(fā)

小編給大家分享一下如何使用SVG畫圓形，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

SVG <circle> 元素是一個(gè)SVG的基本形狀，用來創(chuàng)建圓,基于一個(gè)圓心和一個(gè)半徑，同時(shí)可以利用stroke和fill屬性對(duì)圓進(jìn)行實(shí)線描邊，虛線描邊以及圓形的顏色填充等。

一、繪制圓形

1. SVG 命名空間

# xmlns="http://www.w3.org/2000/svg" # xmlns:xlink="http://www.w3.org/1999/xlink"

這是XML鏈接語(yǔ)言[（XLink）規(guī)范中定義的XML命名空間。有關(guān) XML 的信息，請(qǐng)參閱可擴(kuò)展[標(biāo)記語(yǔ)言（XML） 1.0 規(guī)范。

2. SVG <circle>元素用于繪制圓。

<!DOCTYPE html> <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é)果：

如何使用SVG畫圓形

該圓以點(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)行后圓圈的外觀:

如何使用SVG畫圓形

可以使用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畫圓形

刪除圓的邊框（輪廓），僅用填充顏色填充圓。

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: none;           fill:#FF0000"/> </svg>

沒有邊框的圓運(yùn)行后效果如下:

如何使用SVG畫圓形

三、Circle 填充

該fill樣式屬性控制圈的填充方式。通過將fill屬性設(shè)置為，可以選擇完全不填充none。示例如下:

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: #660066;           fill: none"/> </svg>

這是沒有填充的圓的外觀

如何使用SVG畫圓形

使用fill 屬性設(shè)置填充顏色。

代碼如下：

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: #660066;           fill: #FF0000"/> </svg>

繪制圓并填充顏色的外觀如下:

如何使用SVG畫圓形

使用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>

運(yùn)行效果如下:

如何使用SVG畫圓形

藍(lán)色（右）圓圈現(xiàn)在在內(nèi)部是半透明的。要使筆劃也為半透明，則必須使用stroke-opacitystyle屬性。

以上是“如何使用SVG畫圓形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何使用SVG畫圓形

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽