SVG入門-漸變

前言

SVG并非隻能簡單填充顔色和描邊，更令人興奮的是，你還可以建立和并在填充和描邊上應用漸變色。

有兩種類型的漸變：線性漸變和徑向漸變。你必須給漸變内容指定一個id屬性，否則文檔内的其他元素就不能引用它。為了讓漸變能被重複使用，漸變内容需要定義在<defs>标簽内部，而不是定義在形狀上面。

線性漸變

線性漸變沿着直線改變顔色，要插入一個線性漸變，你需要在SVG檔案的defs元素内部，建立一個<linearGradient> 節點。

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
           

線性漸變内部有幾個<stop> 結點，這些結點通過指定位置的offset（偏移）屬性和stop-color（顔色中值）屬性來說明在漸變的特定位置上應該是什麼顔色；

可以直接指定這兩個屬性值，也可以通過CSS來指定他們的值。

offset的值可以為0，1也可以是0%，100%。

類似于填充和描邊，你也可以指定屬性stop-opacity來設定某個位置的半透明度：

使用漸變時，我們需要在一個對象的屬性fill或屬性stroke中引用它，這跟你在CSS中使用url引用元素的方法一樣。

漸變的方向可以通過兩個點來控制，它們分别是屬性x1、x2、y1和y2，這些屬性定義了漸變路線走向。漸變色預設是水準方向的，但是通過修改這些屬性，就可以旋轉該方向。

徑向漸變

徑向漸變與線性漸變相似，隻是它是從一個點開始發散繪制漸變。建立徑向漸變需要聲明在defs元素裡。

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/> 
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> 
</svg>
           

中值（stops）的使用方法與之前一緻，但是現在這個對象的顔色是中間是紅色的，且向着邊緣的方向漸漸的變成藍色。跟線性漸變一樣，<radialGradient> 節點可以有多個屬性來描述其位置和方向，但是它更加複雜。徑向漸變也是通過兩個點來定義其邊緣位置，兩點中的第一個點定義了漸變結束所圍繞的圓環，它需要一個中心點，由cx和cy屬性及半徑r來定義，通過設定這些點我們可以移動漸變範圍并改變它的大小，如上例的第二個<rect>所展示的。