重生之毒妃梅果小说,遮天辰东小说,神武八荒一颗小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

一篇文章教會(huì)你使用SVG畫圓形

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

目前創(chuàng)新互聯(lián)建站已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、南和網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、繪制圓形

1. SVG 命名空間

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

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

2. SVG 元素用于繪制圓。

運(yùn)行結(jié)果：

該圓以點(diǎn)cx , cy為圓心，半徑為r。cx，cy 和r是元素的屬性。

二、圓形描邊

使用SVG stroke樣式屬性設(shè)置SVG圓的筆觸（輪廓）。

筆劃設(shè)置為#006600深綠色。但是，不僅可以設(shè)置筆觸顏色，還可以設(shè)置更多。還可以使用stroke-widthstyle屬性設(shè)置筆觸寬度。

示例

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
     stroke-width: 3;
  
  
  
       fill:#FF0000"

運(yùn)行后圓圈的外觀:

可以使用stroke-dasharray屬性以虛線繪制邊框。

 
 
 
 
  
  
  
  
  
  
  
  
   style="stroke:#006600;
  
  
  
            stroke-width: 3;
  
  
  
            stroke-dasharray: 10 5;
  
  
  
            fill:#FF0000"/>

渲染后的外觀 :

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

 
 
 
 
  
  
  
  
  
  
  
  
   style="stroke: none;
  
  
  
            fill:#FF0000"/>

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

三、Circle 填充

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

 
 
 
 
  
  
  
  
  
  
  
  
   style="stroke: #660066;
  
  
  
            fill: none"/>

這是沒有填充的圓的外觀

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

代碼如下：

 
 
 
 
  
  
  
  
  
  
  
  
   style="stroke: #660066;
  
  
  
            fill: #FF0000"/>

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

使用fill-opacity style屬性將填充設(shè)置為透明。以下示例繪制了兩個(gè)圓，一個(gè)圓部分位于另一個(gè)圓的上方，并且是半透明的。

例

 
 
 
 
  
  
  
  
  
  
  
     
  
  
  
  
                  fill: #cc0000;
  
  
  
             ">
  
  
  
     
  
  
  
  
                  fill: #0000cc;
  
  
  
                    fill-opacity: 0.5;
  
  
  
             ">

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

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

四、總結(jié)

本文基于Html基礎(chǔ)，利用SVG畫不一樣的圓形，添加不一樣的效果。以及在實(shí)際開發(fā)項(xiàng)目中需要注意的點(diǎn)，遇到的一些難點(diǎn)，都提供了一些有效等等解決方案。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡單，希望能夠幫助讀者更好的去學(xué)習(xí)SVG。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。

網(wǎng)站標(biāo)題：一篇文章教會(huì)你使用SVG畫圓形
地址分享：http://fisionsoft.com.cn/article/cccisco.html

新聞中心

其他資訊