日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解SVGfill屬性

SVG形狀的fill定義了其輪廓內(nèi)的形狀的顏色。換句話說，SVG形狀的表面。填充是您可以為任何SVG形狀設(shè)置的基本SVG CSS屬性之一。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、武清網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站制作、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為武清等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

一、Fill

SVG形狀的填充是形狀輪廓內(nèi)的填充。

定義了一個使用藍色(#0000ff)填充顏色但沒有描邊顏色的圓。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.     項目 
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.        
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.  
    10.

運行效果：

二、填充和描邊示例

可以將SVG筆觸和填充顏色組合為SVG形狀。

示例

使用較深的藍色(#000066)描邊顏色和較淺的藍色(#3333ff)填充顏色定義圓。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.     項目 
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.        
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.  
    10.

運行效果：

1. fill-opacity

SVG CSS屬性 fill-opacity 用于設(shè)置形狀的填充顏色的不透明度。fill-opacity 使用介于0和1之間的數(shù)值。值越接近0，填充越透明。值越接近1，填充越不透明。默認fill-opacity值為1，這意味著填充顏色是完全不透明的。

這是一個SVG填充不透明度 fill-opacity示例，其中包含兩個具有不同(fill-opacity)的圓：

示例

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.       World Behindeda Look 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.       
  
  
  
  
  5.                  fill-opacity: 0.3;  "> 
    6. 
  
  
  
  
  6.          
    7. 
  
  
  
  
  7.       
  
  
  
  
  8.                  fill-opacity: 0.7;  "> 
    9. 
  
  
  
  
  9.         
    10. 
  
  
  
  
  10.  
    11.

運行效果：

請注意

右圓圈后面的文本比左圓圈后面的文本更不可見。那是因為右圓fill-opacity比左圓高。

2. fill-rule

fill-rule決定的復(fù)雜形狀的填充方式。fill-rule可以采用兩個不同的值 。這些值是：

2.1 nonzero

通常，這兩個值是確定形狀內(nèi)部和外部形狀的規(guī)則。僅內(nèi)部填充，對于一個圓來說，這很簡單，但是對于更復(fù)雜的形狀，這并不是那么容易。

示例

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.          M50,40 l20,20 l-20,20 l-20,-20 l20,-20" 
    4. 
  
  
  
  
  4.          style="stroke: #000000; 
    5. 
  
  
  
  
  5.          fill: #6666ff; 
    6. 
  
  
  
  
  6.          fill-rule: nonzero; 
    7. 
  
  
  
  
  7.       "> 
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.          M150,40 l-20,20 l20,20 l20,-20 l-20,-20" 
    12. 
  
  
  
  
  12.          style="stroke: #000000; 
    13. 
  
  
  
  
  13.          fill: #6666ff; 
    14. 
  
  
  
  
  14.          fill-rule: nonzero;"> 
    15. 
  
  
  
  
  15.  
    16.

代碼解析：

兩個路徑示例各有8條線，每條線都以菱形繪制，其中較大的菱形包含較小的菱形。

在左側(cè)路徑中，內(nèi)部菱形是從左向右(順時針)繪制的。右邊的路徑中，內(nèi)部菱形從右到左(逆時針)繪制。

這是使用fill-rule：non-zero繪制時的結(jié)果圖像。

2.2 evenodd

這是相同的路徑示例，使用fill-rule：evenodd。

示例

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.          M50,40 l20,20 l-20,20 l-20,-20 l20,-20" 
    4. 
  
  
  
  
  4.       style="stroke: #000000; 
    5. 
  
  
  
  
  5.       fill: #6666ff; 
    6. 
  
  
  
  
  6.       fill-rule: evenodd;" > 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.          M150,40 l-20,20 l20,20 l20,-20 l-20,-20" 
    10. 
  
  
  
  
  10.       style="stroke: #000000; 
    11. 
  
  
  
  
  11.       fill: #6666ff; 
    12. 
  
  
  
  
  12.       fill-rule: evenodd;" > 
    13. 
  
  
  
  
  13.  
    14.

運行后圖像效果：

注意：

evenodd字面意思是“奇偶”。

按該規(guī)則：

要判斷一個點是否在圖形內(nèi)，從該點作任意方向的一條射線，然后檢測射線與圖形路徑的交點的數(shù)量。在任意方向上從點到無窮遠繪制一條線(射線)。每當路徑穿過射線時，都增加一個計數(shù)器。如果總數(shù)是偶數(shù)，則該點在外面。如果總計數(shù)為奇數(shù)，則該點位于形狀內(nèi)部。

三、總結(jié)

本文基于Html基礎(chǔ)，講解了有關(guān)SVG中的fill屬性，對于fill 填充屬性中常見的屬性，fill-opacity，fill-rule，描邊屬性。通過案例的分析說明進行了詳細講解，通過豐富的案例運行效果圖了能夠直觀的看到結(jié)果，能夠幫助讀者更好的理解。

代碼很簡單，希望能夠幫助你學(xué)習(xí)。

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


當前名稱：一篇文章帶你了解SVGfill屬性
當前地址：http://www.dlmjj.cn/article/dhdepid.html