SVG基礎之SVG圖形填充顏色

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

　　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;  " />

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


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

　　填充規則

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

• 　　nonzero

• 　　evenodd

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

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

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

<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規則決定一個點是否在圖形內的原則是：





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

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