iT邦幫忙

DAY 10
1

SVG 30 天 ~ 就要醬玩系列 第 10

Day10 - SVG fill 填色

介紹過了 stroke 邊框之後,接下來就要介紹 fill 填色。( oxxostudio.tw 同步發表:SVG 研究之路 (7) - fill 填色 ,現在每次發文和分享都會吃圖而且格式還會亂掉... 囧... 大家要看完整效果請上 blog 瀏覽吧... Sorry... >_<... )

填色分成三種,一種是純色的填色,一種是漸層的填色,最後一種是利用圖案的填色,一張圖片的好看與否,很重要的一部分往往取決於色彩的呈現,因此掌握填色的技巧,對於圖片的表現也更能引人入勝,而 SVG 的好處,填色也是向量化,更可以用程式去控制色彩,以下將分別介紹三種填色的方式:

1.基本純色

基本純色其實沒什麼特別的,只需要在 fill 裏頭加上顏色的名稱或是色碼,就可以完成

<rect x="50" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#f40"></rect>
<rect x="170" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#0f5"></rect>
<rect x="290" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#09f"></rect>

2.漸層(之後會有篇幅詳細介紹)

SVG 裏頭的漸層做法比較特殊,首先要先建立一個漸層的定義檔,接著讓需要漸層的元件,指向這個定義檔,就可以讓元件具有漸層,除了漸層是這麼做的,SVG 文字的變化也有一部分是使用定義檔來表現,會之後的篇幅提到。至於定義檔的寫法,會在外層統一用一個<defs></defs>( definitions ) 的標籤包著,這樣也方便識別當中的標籤是定義檔 ( 我測試過不包也是可以,不過基於 W3C 的定義規則,還是包起來吧 ),接著在<defs></defs>裏頭加入<linearGradient></linearGradient>的標籤,這就完成了線性漸層漸層定義檔的架構 ( 放射狀漸層使用<radialGradient></radialGradient> ) ,不過別急,還沒結束,<linearGradient></linearGradient>裏頭還有漸層顏色的設定,就是使用<stop>的標籤來設定,可以看看下面的設定:

<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

由上面的定義檔可以看到,我們給<linearGradient></linearGradient>加上了id,這是為了讓要套用這個定義檔的元件可以有一個指向的參考,這樣不同的元件只要套用同一個定義檔,就可以套用同樣的漸層,而stop裏頭的offset,使用百分比進行設定,stop-color則是該位置的顏色,可以自行添加stop的數量決定漸層顏色的數量。

<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

我們也可以設定剛剛提過了<radialGradient></radialGradient>的放射狀漸層。

<defs>
   <radialGradient id="a1">
     <stop offset="5%" stop-color="#ff0" />
     <stop offset="95%" stop-color="#f00" />
   </radialGradient>
</defs>

如果看到這邊你認為結束了,那就太小看 SVG 漸層了,linearGradient與radialGradient標籤裏頭其實還有很多的屬性可以設定,可以設定線性漸層的方向,以及放射狀漸層的圓心。( 別忘了也都是用百分比設定 )

2.1 換成垂直的漸層:

<defs>
   <linearGradient id="a1" x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

2.2 換成傾斜的漸層:

<defs>
   <linearGradient id="a1" x1="0%" y1="0%" x2="100%" y2="100%">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>

2.3 改變中心點的漸層:

<defs>
   <radialGradient id="a1" cx="20%" cy="40%">
     <stop offset="5%" stop-color="#ff0" />
     <stop offset="95%" stop-color="#f00" />
   </radialGradient>
</defs>

3.圖案 ( 之後會有篇幅專門介紹 ):

看完了漸層,最後一個就是利用圖案來表現 fill ,要利用圖案來填色,第一步仍然是和漸層使用相同的做法,就是先建立一個定義檔,接著在defs裡加入<pattern></pattern>的標籤,pattern表示的是一個圖案的區域,會用這個區域進行重複排列圖案的動作,因此我們要重複的圖案,必須要比pattern小,不然就會被裁切掉了。

<defs>
  <pattern id="a2" patternUnits="userSpaceOnUse" x="0" y="0" width="30" height="30">
    <rect x="0" y="0" width="25" height="25" stroke="#none" fill="#09f"></rect>
  </pattern> 
</defs>

接著在我們要填色的區域和定義檔連結就可以完成圖案的填色

<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a2)"></circle>

其實填色是千變萬化的,這裡只是將填色的方式做了一個最基本的介紹,至於如何能填出漂亮的顏色,就真的要看個人的經驗和練習囉!( 明天後天分別會介紹詳細的漸層用法以及圖案填充 )


上一篇
Day9 - 理解 SVG viewport 與 viewbox
下一篇
Day11 - 再談 SVG 漸層色
系列文
SVG 30 天 ~ 就要醬玩31

尚未有邦友留言

立即登入留言