小編給大家分享一下SVG基礎之SVG圖形填充顏色，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名申請、網(wǎng)站空間、營銷軟件、網(wǎng)站建設、鳳岡網(wǎng)站維護、網(wǎng)站推廣。

SVG的填充是指在圖形的描邊內部填充指定的顏色。通過fill SVG CSS屬性，我們可以為任何SVG圖形填充顏色。

填充顏色示例

SVG的填充顏色是將顏色填充到SVG圖形描邊的里面。下面是一個例子：

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;" />

這個例子定義了一個填充色為藍色的圓形，它沒有描邊。得到的結果如下：

   
填充和描邊

你可以結合使用SVG的填充和描邊，下面是一個例子：

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" />

這個例子定義了一個描邊色為深藍色，填充色為淺藍色的圓形。得到的結果如下：

   

填充色的透明度

SVG fill-opacity CSS屬性用于設置SVG圖形的填充色透明度。fill-opacity屬性的取值在0-1之間，越接近0越透明，越接近1越不透明。默認的fill-opacity值為1，即完全不透明。

下面是一個使用fill-opacity屬性的例子：

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.3;  " />
<circle cx="120" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.7;  " />

上面的代碼的返回結果是：


上面的文字是在兩個圓形的下面，因為圓形是半透明的，所以文字都可以被看見。

填充規(guī)則

SVG fill-rule屬性用于決定復雜的圖形如何進行填充。fill-rule屬性有兩個可選值：

• nonzero

• evenodd

這兩個值通常用于決定哪些部分是在圖像的內部，哪些部分是在圖形的外部。只有在圖像內部的部分才會被填充。如果是一個圓形就非常簡單，但是大多數(shù)圖像并非如此簡單，來看下面的例子：

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;
      " />
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;" />

這里有兩條路徑分別包含8條直線，繪制成一個方塊形狀，在大方塊里面是一個小方塊。在第一條路徑中，內部的方塊從左向右(順時針)繪制，在第二條路徑中，內部的方塊從右向左(逆時針)繪制。下面是當fill-rule屬性設置為nonzero時的返回結果。

如上圖所示，nonzero規(guī)則是根據(jù)內部方塊的繪制方向來決定它是否在外部方塊的內部。nonzero規(guī)則決定一個點是否在圖形的內部或外部的原則如下：
從這個點向任何方向畫一條射線，每次圖形中的一條路徑穿過這條射線，如果路徑是從左向右穿過射線的計數(shù)加1，如果是從右向左穿過的計數(shù)減1。在計算所有穿過射線的路徑之后，如果總數(shù)是0，那么這個點會被認為在路徑之外。如果總數(shù)不是0，那么這個點會被認為是在路徑之內。

下面的例子使用的是fill-rule為evenodd規(guī)則的例子：

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />

1. 下面是返回結果：





2. evenodd規(guī)則決定一個點是否在圖形內的原則是：





3. 從這個點向任何方向畫一條射線，每一次圖形中的路徑穿過這條射線，計數(shù)加1。如果總數(shù)是偶數(shù)，內這個點在圖形之外。如果總數(shù)是奇數(shù)，那么這個點在圖形之內。

以上是“SVG基礎之SVG圖形填充顏色”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：SVG基礎之SVG圖形填充顏色-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://vcdvsql.cn/article6/csedog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站建設、商城網(wǎng)站、網(wǎng)站導航、品牌網(wǎng)站設計、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)