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

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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),鄂倫春企業(yè)網(wǎng)站建設(shè),鄂倫春品牌網(wǎng)站建設(shè),網(wǎng)站定制,鄂倫春網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,鄂倫春網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

　填充顏色示例

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

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

這個(gè)例子定義了一個(gè)填充色為藍(lán)色的圓形，它沒有描邊。得到的結(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形是半透明的，所以文字都可以被看見。

填充規(guī)則

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

• nonzero

• evenodd

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

<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)部方塊的繪制方向來決定它是否在外部方塊的內(nèi)部。nonzero規(guī)則決定一個(gè)點(diǎn)是否在圖形的內(nèi)部或外部的原則如下：
從這個(gè)點(diǎn)向任何方向畫一條射線，每次圖形中的一條路徑穿過這條射線，如果路徑是從左向右穿過射線的計(jì)數(shù)加1，如果是從右向左穿過的計(jì)數(shù)減1。在計(jì)算所有穿過射線的路徑之后，如果總數(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)向任何方向畫一條射線，每一次圖形中的路徑穿過這條射線，計(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：SVG基礎(chǔ)之SVG圖形填充顏色
本文鏈接：http://muchs.cn/article46/gdsjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、企業(yè)建站、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、微信公眾號(hào)

廣告

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