漸變，是一種顏色向另一種顏色的平滑過(guò)渡。此外，幾種顏色的過(guò)渡可以應(yīng)用于同一個(gè)元素。SVG中有兩種主要的漸變類(lèi)型：線性漸變和徑向漸變。
線性漸變應(yīng)用 linearGradient 元素來(lái)定義，它必須嵌套在 defs 標(biāo)簽中，可以實(shí)現(xiàn)水平漸變、垂直漸變或角度漸變。
linearGradient 是一個(gè)雙標(biāo)簽，基本語(yǔ)法是：尖角號(hào) linearGradient，尖角號(hào) /linearGradient。
它有兩組坐標(biāo)屬性：x1, y1, x2, y2 (直接讀出來(lái))，用于定義線性漸變的開(kāi)始位置和結(jié)束位置。
當(dāng) y1 和 y2 相等，而 x1 和 x2 不等時(shí)，就會(huì)產(chǎn)生水平漸變。
當(dāng) x1 和 x2 相等，而 y1 和 y2 不等時(shí)，就會(huì)產(chǎn)生垂直漸變。
當(dāng) x1 和 x2 不等，y1 和 y2 也不等時(shí)，就會(huì)產(chǎn)生角度漸變。
線性漸變的顏色范圍可以由兩種或多種顏色組成。每種顏色都用一個(gè) stop 標(biāo)簽來(lái)指定，它是一個(gè)雙標(biāo)簽，基本語(yǔ)法為尖角號(hào) stop，尖角號(hào) /stop。一般需要定義兩個(gè)屬性：
offset 屬性，用于定義漸變顏色的開(kāi)始和結(jié)束位置，屬性值是一個(gè)描述相對(duì)位置的百分比。 (10%)
stop-color 屬性，用于定義漸變的顏色，取值為任何一個(gè)合法的顏色值。
我們來(lái)做個(gè)例子。
打開(kāi)編輯器，新建一個(gè) linear-radial.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加一個(gè) svg 標(biāo)簽，定義屬性 width 等于 400，height 等于 150。
在 svg 里添加 ellipse 標(biāo)簽，給它定義屬性 cx 等于 200，cy 等于 70，rx 等于 85，ry 等于 55。保存文件。
在瀏覽器中預(yù)覽，一個(gè)背景默認(rèn)為黑色的橢圓形就繪制好了。
接下來(lái)給它填充一個(gè)線性漸變的顏色。
回到編輯器，在 svg 里的第一行添加一個(gè) defs 標(biāo)簽，在標(biāo)簽內(nèi)添加一個(gè) linearGradient 標(biāo)簽，定義屬性 x1 等于 0%，y1 等于 0%，x2 等于 100%，y2 等于 0%。我們看：y1 和 y2 相等，x1 和 x2 不相等，說(shuō)明這是一個(gè)水平的線性漸變。
在 linearGradient 里添加 stop 標(biāo)簽，定義屬性 offset 等于 0%，表示漸變從橢圓的最左側(cè)開(kāi)始。定義屬性 stop-color 等于 rgb(255,255,0)，表示漸變的顏色從黃色開(kāi)始。
復(fù)制這個(gè) stop 標(biāo)簽，修改屬性 offset 為 100%，表示漸變到橢圓的最右側(cè)。修改屬性 stop-color 為 rgb(255,0,0)，表示漸變的顏色到紅色結(jié)束。保存。
回到瀏覽器，刷新。誒？怎么沒(méi)有效果。
回到代碼看一下。原來(lái)，我們只繪制了橢圓形和定義了漸變的效果，但沒(méi)有將效果應(yīng)用的圖形上。
在 linearGradient 標(biāo)簽上定義 id 屬性，值為 grad1，然后在 ellipse 標(biāo)簽上定義 fill 屬性，值為 url 小括號(hào) 井號(hào) grad1 "url(#grad1)"。這里的 grad1 就是我們?cè)?linearGradient 標(biāo)簽上定義的 id 屬性值。再次保存。
回到瀏覽器，刷新。一個(gè)背景從黃色到紅色水平漸變的橢圓，就繪制好了。
思考一下，如果將水平線性漸變調(diào)整為垂直線性漸變，該如何實(shí)現(xiàn)呢？
回到編輯器，只需要將 x2 修改為 0%，y2 修改為100%。我們看：x1 和 x2 相等，y1 和 y2 不相等，說(shuō)明這是一個(gè)垂直的線性漸變。保存。
回到瀏覽器，刷新，一個(gè)背景從黃色到紅色垂直漸變的橢圓就繪制好了。
這里，我們也可以給橢圓添加文本。
回到編輯器，在 ellipse 標(biāo)簽下添加 text 標(biāo)簽，添加文本SVG，定義屬性 fill 等于 #ffffff，font-size 等于 45，x 等于 150，y 等于 86。保存。
回到瀏覽器，刷新，文本就添加好了。
接下來(lái)，我們學(xué)習(xí)徑向漸變。
徑向漸變應(yīng)用 radialGradient 元素來(lái)定義，它也必須嵌套在 defs 標(biāo)簽中。
radialGradient 是一個(gè)雙標(biāo)簽，基本語(yǔ)法是：尖角號(hào) radialGradient，尖角號(hào) /radialGradient。
它有幾個(gè)重要的屬性：
id 屬性，定義了漸變的唯一名稱(chēng)。
cx、cy 和 r 屬性，定義了最外面的圓，fx 和 fy 屬性， 定義了最里面的圓。
徑向漸變的顏色范圍可以由兩種或多種顏色組成。和線性漸變一樣，每種顏色都用一個(gè) stop 標(biāo)簽來(lái)指定，也需要定義 offset 和 stop-color 屬性。
回到編輯器，在上個(gè) svg 結(jié)尾處添加一個(gè) br 標(biāo)簽。回車(chē)換行。
添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 500，height 等于 150。
在 svg 里添加 ellipse 標(biāo)簽，給它定義屬性 cx 等于 200，cy 等于 70，rx 等于 85，ry 等于 55。保存。
回到瀏覽器，刷新，一個(gè)黑色橢圓形繪制好了。
返回編輯器，在 svg 里的第一行添加一個(gè) defs 標(biāo)簽，在標(biāo)簽內(nèi)添加一個(gè) radialGradient 標(biāo)簽，定義屬性 cx 等于 50%，cy 等于 50%，r 等于 50%，fx 等于 50%，fy 等于 50%。
在 radialGradient 里添加 stop 標(biāo)簽，定義屬性 offset 等于 0%，表示漸變位置從橢圓的圓心開(kāi)始。定義屬性 stop-color 等于 rgb(255,255,255)，表示漸變的顏色從白色開(kāi)始。
復(fù)制這個(gè) stop 標(biāo)簽，修改屬性 offset 為 100%，表示漸變位置到橢圓的邊界。修改屬性 stop-color 為 rgb(0,0,255)，表示漸變的顏色到藍(lán)色結(jié)束。
在 radialGradient 標(biāo)簽上定義 id 屬性，值為 grad2，然后在 ellipse 標(biāo)簽上定義 fill 屬性，值為： url 小括號(hào) 井號(hào) grad2 "url(#grad2)"。保存。
回到瀏覽器，刷新，一個(gè)具有白色高光的藍(lán)色橢圓就繪制好了。
思考一下，我們可以改變高光的位置嗎？其實(shí)有的小伙伴已經(jīng)想到了。
返回編輯器，將 radialGradient 標(biāo)簽的 cx，cy，fx，fy 的值全部修改為 30%，保存。
回到瀏覽器，刷新，高光的位置發(fā)生了變化。
