SVG基礎(chǔ)之SVG圖形填充顏色

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

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

　　填充顏色示例

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

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

　　這個(gè)例子定義了一個(gè)填充色為藍(lán)色的圓形，它沒(méi)有描邊。得到的結(jié)果如下：

   
　　填充和描邊

　　你可以結(jié)合使用SVG的填充和描邊，下面是一個(gè)例子：

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

　　這個(gè)例子定義了一個(gè)描邊色為深藍(lán)色，填充色為淺藍(lán)色的圓形。得到的結(jié)果如下：

    　　

填充色的透明度

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

　　下面是一個(gè)使用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;  " />

　　上面的代碼的返回結(jié)果是：


　　上面的文字是在兩個(gè)圓形的下面，因?yàn)閳A形是半透明的，所以文字都可以被看見(jiàn)。

　　填充規(guī)則

　　SVG fill-rule屬性用于決定復(fù)雜的圖形如何進(jìn)行填充。fill-rule屬性有兩個(gè)可選值：

• 　　nonzero

• 　　evenodd

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

<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條直線，繪制成一個(gè)方塊形狀，在大方塊里面是一個(gè)小方塊。在第一條路徑中，內(nèi)部的方塊從左向右(順時(shí)針)繪制，在第二條路徑中，內(nèi)部的方塊從右向左(逆時(shí)針)繪制。下面是當(dāng)fill-rule屬性設(shè)置為nonzero時(shí)的返回結(jié)果。

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

　　下面的例子使用的是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. 　　下面是返回結(jié)果：





2. 　　evenodd規(guī)則決定一個(gè)點(diǎn)是否在圖形內(nèi)的原則是：





3. 　　從這個(gè)點(diǎn)向任何方向畫(huà)一條射線，每一次圖形中的路徑穿過(guò)這條射線，計(jì)數(shù)加1。如果總數(shù)是偶數(shù)，內(nèi)這個(gè)點(diǎn)在圖形之外。如果總數(shù)是奇數(shù)，那么這個(gè)點(diǎn)在圖形之內(nèi)。

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