漸變色(gradient)是指從一種顏色平滑的過(guò)渡到另外一種顏色。而且，我們可以將多種漸變色應(yīng)用到同一個(gè)網(wǎng)頁(yè)元素上。

在SVG里，有兩種主要的漸變色類型：

• 線性漸變色 Linear

• 輻射式(放射式)漸變色 Radial

SVG線性漸變色 – <linearGradient>

<linearGradient>標(biāo)記就是用來(lái)定義漸變色的。

<linearGradient>標(biāo)記必須放在<defs>標(biāo)記內(nèi)。<defs>標(biāo)記就是“definitions”單詞的簡(jiǎn)寫，用來(lái)容納其它各種SVG標(biāo)記。

線性漸變色可以定義成水平漸變色，垂直漸變色和斜向漸變色：

• 當(dāng)y1和y2相等，而x1和x2不等時(shí)，就形成了水平漸變色

• 當(dāng)y1和y2不等，而x1和x2相等時(shí)，就形成了垂直漸變色

• 當(dāng)y1和y2不等，而x1和x2也不等時(shí)，就形成了斜向漸變色

例 1

我們先定義一個(gè)橢圓，而后用一個(gè)從黃色到紅色的漸變色渲染它：

上面的圖像使用了下面的SVG代碼：

<svg height='150' width='400'> <defs>   <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>     <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />     <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />   </linearGradient> </defs> <ellipse cx='200' cy='70' rx='85' ry='55'fill='url(#grad1)' /></svg>

代碼說(shuō)明：

• <linearGradient>標(biāo)記的id屬性定義了這個(gè)漸變色的唯一標(biāo)志

• <linearGradient>標(biāo)記的x1, x2, y1,y2四個(gè)屬性定義了漸變色的起始位置和終止位置

• 漸變色的顏色組成可以是2個(gè)或2個(gè)以上的顏色。每種顏色都使用一個(gè)<stop>標(biāo)記定義。offset屬性用來(lái)定義漸變色的開始和結(jié)束位置。

• fill屬性定義了需要引用的漸變色的ID

例 2

下面的例子中的漸變色方向是垂直的：

上面的圖像使用了下面的SVG代碼：

<svg height='150' width='400'> <defs>   <linearGradient id='grad2' x1='0%' y1='0%' x2='0%' y2='100%'>     <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />     <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />   </linearGradient> </defs> <ellipse cx='200' cy='70' rx='85' ry='55' fill='url(#grad2)' /></svg>

例 3

下面的例子里，我們使用了水平漸變色，并且還在橢圓里添加了文字：

上面的圖像使用了下面的SVG代碼：

<svg height='150' width='400'> <defs>   <linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'>     <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />     <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />   </linearGradient> </defs> <ellipse cx='200' cy='70' rx='85' ry='55'fill='url(#grad3)' />  <text fill='#ffffff' font-size='45' font-family='Verdana' x='150' y='86'>  SVG</text></svg>

代碼說(shuō)明：

• <text>標(biāo)記的作用是添加一段文字