如何給SVG填充和描邊應用線性漸變

給SVG元素應用填充和描邊有三種方法（戳這里學習SVG填充和描邊的相關內容）。你可以使用純色、圖案或漸變。前面兩種方法我們之前已經講過了，現在我們來討論第三種方法——漸變。

SVG提供了兩種漸變——線性、徑向。我今天先講線性漸變，下篇我們再看看徑向漸變。

SVG線性漸變

如果你看過這系列的SVG之前的文章，你應該對這里漸變的很多概念都比較熟悉啦。在<defs>中定義，然后在后面把它們作為填充或描邊來引用。

我們使用<linearGradient>元素來定義線性漸變。我們從一個簡單的“藍色->綠色”的漸變實例開始看起。

PS：如果我是SVG的創造者，大家有沒有覺得在SVG元素和屬性的命名這塊做得還不錯呢

<svg width="660" height="220">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

上面的實例在<defs>標簽內定義了一個線性漸變，並給它賦了一個id為linear。這個id用於在后面矩形引用它作為填充的時候使用。我們前面的pattern那塊已經講過id是用來引用的，還有symbol以及group。就是在一個地方定義，然后在另一個地方引用~

我們來關注一下新的內容。看看<linearGradient>元素，以及它的四個屬性。x和y的值確定漸變的起點和終點。在這里，x方向上漸變從0%開始，到100%結束；y方向上保留在0%的位置。也就是說這是一個水平漸變。

我選擇使用百分比來表示，是因為x和y的值可以是百分比或者是用0.0到1.0之間的數表示。如果沒有指定數值，那么就默認是0或者0%。

在<linearGradient>標簽內定義了兩個顏色結點，使用<stop>元素定義。第一個顏色結點在offset為0%的位置設置了一個藍色，第二個結點在100%的位置設置了綠色。

這是上面的實例的效果。

 

 

結果應該是你意料之中的。第一個顏色結點（藍色）是左邊緣（0%）處的顏色，第二個顏色結點（綠色）是右邊緣（100%）處的顏色，中間是過渡。

當我把x2的值改為50%。你可以看到填充在0%-50%的位置是“藍色->綠色”的漸變，50%-100%的位置完全變成了綠色。

 

 

漸變除了可以作為填充，也可以作為描邊。這里我把前面實例的矩形稍作修改。填充設置為純色，把漸變變成矩形的描邊。stroke-width為20。

<rect x="10" y="10" width="600" height="200" stroke="url(#linear)" stroke-width="20" fill="#630" />

結果如下。

 

 

你可以看到漸變現在已經變成了描邊，而不是填充。我把描邊設置得足夠寬，這樣我們可以很清楚地看到從0%到50%位置的漸變，和前面的示例一樣。

你可以不止設置開始0%和結束100%位置的顏色結點，想多定義幾個結點都是可以的。這里我設置了三個顏色結點，在藍色和綠色中間50%的位置加了一塊紅色。

<svg width="660" height="220">
 <defs>
   <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
     <stop offset="0%"   stop-color="#05a"/>
     <stop offset="50%"  stop-color="#a55"/>
     <stop offset="100%" stop-color="#0a5"/>
   </linearGradient>
 </defs>

 <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

結果如下，0%的位置是藍色，50%的位置是紅色，100%的位置是綠色，中間是過渡。

 

 

這些對於線性漸變都是非常基礎的，希望你學得也容易上手。但是，還有很多內容喲。

<stop>元素的屬性

在<linearGradient>和<stop>元素中我都設置了一些屬性，還有幾個沒有用到的。我們先<stop>的屬性，因為這塊只有一個屬性比較陌生。

<stop>元素一共有屬性，offset，stop-color，stop-opacity。前兩個我們都已經看過了。

• offset:對於線性漸變，offset表示漸變矢量的位置。它定義了漸變結點的位置。它可以是0到1之間的值，也可以是0%到100%之間的值。
• stop-color:定義顏色的在offset結點位置的顏色
• stop-opacity:定義顏色結點的透明度，它可以是0到1之間的值，或者是0%到100%之間的值。

目前我還沒有用過stop-opacity屬性，不過我想你應該知道如何使用吧(⊙v⊙)。它的默認值是1.0，我們之前的實例中它都是完全不透明的。

下面這個實例中，我把第一個顏色結點設置了50%的透明度（0.5），第二個結點保留100%（1.0）。

<svg width="660" height="220">
 <defs>
   <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
     <stop offset="0%"   stop-color="#05a" stop-opacity="0.5" />
     <stop offset="100%" stop-color="#0a5" stop-opacity="1.0" />
   </linearGradient>
 </defs>

 <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

結果如下，應該也是預料之中的結果。

<linearGradient>元素的屬性

關於<linearGradients>還有不止一個屬性，但是，如果你看過這系列之前的文章，這應該也不陌生。

• x1, x2, y1, y2:定義漸變的起點和終點。
• id:用於漸變的引用
• xlink:href:在一個漸變中引用另一個漸變的方法。被引用的漸變的屬性是可繼承的，也可以被重寫。

下面這個實例展示的是如何在一個漸變中引用另一個漸變，繼承它的值，然后重寫部分值。

<svg width="660" height="220">
 <linearGradient id="gradient1">
    <stop id="stop1" offset="0%" stop-color="#05a" stop-opacity="0.5" />
    <stop id="stop2" offset="100%" stop-color="#0a5"/>
  </linearGradient>

  <linearGradient id="gradient2" x1="0" x2="0" y1="0" y2="1"
     xlink:href="#gradient1"/>

<rect x="0" y="0" width="600" height="200" fill="url(#gradient2)" />
</svg>

第一個漸變拿的是原來的實例中的例子。第二個漸變引用了第一個漸變，通過設置x2和y2的值，把方向改成垂直。

結果如下，漸變還是從藍色到綠色的漸變，但是它是垂直方向的，而不是水平的。

接下來的兩個屬性是新的，但是它們看起來也很眼熟。正如Markers有markerUnits，圖案有patternUnits，這樣marker和圖案才可以選擇是否隨着應用的元素一起縮放。猜一下漸變對應的這個屬性是什么。

gradientUnit！它有兩個的值，userSpaceOnUse和objectBoundingBox，這用於決定漸變是否隨着引用它的元素進行縮放。也就是說它決定了x1、y1、x2、y2的縮放。

• userSpaceOnUse: x1、y1、x2、y2表示當前用戶坐標系統的坐標。也就是說漸變中的值都是絕對值。
• objectBoundingBox: x1, y1, x2, y2表示應用漸變的元素創建的邊界坐標系統。也就是說漸變隨着應用的元素進行了縮放。

我們目前位置遇到的元素都可以變換，漸變也是一樣。gradientTransform屬性允許你給任何漸變添加像rotate()和transition()這樣的變換（關於SVG 的transform變換，學習戳這里）。

這里我給第二個漸變添加了一個gradientTransform，讓它旋轉了-50度。

<linearGradient id="gradient2" x1="0" y1="0" x2="0" y2="1" xlink:href="#gradient1" gradientTransform="rotate(-50)" />

與圖案相比，漸變的旋轉效果比較難看出（SVG圖案變換的內容戳這里），但是你應該可以發現漸變是旋轉了的。如果看不出來，和前面的實例對比一下，就會發現不同了。

現在來到<linearGradient>的最后一個屬性，spreadMethod，這個是非常新的屬性了唷。spreadMethod屬性接受三個值，pad、reflect和repeat。它定義了漸變如何擴散到元素的其它位置，如果圖形中的開始和結束的顏色結點不是0%和100%。

• pad: （默認值）使用漸變的顏色結點來填充剩余的空間。例如，如果第一個結點是20%，那么0%到20%這部分就是相同的顏色。
• reflect: 映射漸變圖案，從'start-to-end'，再從'end-to-start'，然后'start-to-end'，直到空間都填滿了。
• repeat: 重復漸變圖案，從起點->終點，直到空間填滿。

這三個值都很容易理解，我們結合下面的實例來看看。這是一個水平漸變的例子，添加了spreadMethod屬性。因為顏色結點是在矩形中，在spreadMethod前面有很多效果，我把x1的值改成了40%，x2的值改成了60%。

<svg width="660" height="220">
  <defs>
    <linearGradient id="linear" x1="40%" y1="0%" x2="60%" y2="0%" spreadMethod="pad">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

第一個結果中spreadMethod的值為pad，它和初始示例的效果相似，顏色結點是0%和100%。只是純色多一點，然后中間的過渡比較少，但是還是很相似的。

注意：有一些瀏覽器對於reflect和repeat這兩個值的支持是有問題的。不僅是Safari，其它瀏覽器也是。我下面放了效果的截圖（Firefox），表示本來看到結果應該是什么樣的（如果你的瀏覽器中這個屬性有問題的話）。

這是和上面一樣的漸變，但是把spreadMethod的值設置為reflect。藍色和綠色的漸變過渡來回了四次。在40%處的顏色是最初設置的藍色，然后60%是初始設置的第二個顏色結點——綠色。

SVG

 

截圖

reflect讓漸變在兩個顏色結點間來回了四次。看起來就像它聚焦在某個純色結點的位置之后，又散開然后再次聚焦在下一個位置。

下面spreadMethod設置為repeat的情況。它從藍色過渡到綠色，但是在某個點的時候它突然跳成了藍色，然后又過渡到綠色。

SVG

 

截圖

圖案持續這樣突然變成藍色，然后又過渡成綠色。直到100%的位置，矩形填滿。如果你將它和上一個例子進行對比，你會發現填充在40%和60%的位置都是分別是藍色和綠色。

總結

圖案、marker、symbol和漸變，都是可以在一個位置定義，然后引用，也可以作為另一個SVG元素的fill或stroke。

在每個<linearGradient>中你可以使用<stop>元素引入顏色結點，然后分別給漸變和顏色結點添加屬性，創建出好玩的線性漸變。

使用xlink:href屬性可以讓一個漸變繼承另一個漸變，也就是我們在一個漸變中定義顏色結點，然后在另一個漸變中引用它，只改變其方向，變得非常容易。

SVG還可以創建徑向漸變，我們下篇文章見。如果你已經理解了線性漸變，那么徑向漸變也可以很快掌握噠。

 

原文http://www.w3cplus.com/svg/svg-linear-gradients.html?utm_source=tuicool&utm_medium=referral