SVG漸變
漸變是從一種顏色到另一種平滑過渡。 此外，幾個顏色過渡，可以應用到相同的元件。
有兩種主要類型的SVG梯度：
- 線性
- 徑向
SVG線性漸變 - <的LinearGradient>
所述<linearGradient>元素用來定義的線性梯度。
在<linearGradient>元素必須嵌套在一個<defs>標記。 在<defs>標籤是短期的定義和含有特殊元素的定義(such as gradients) 。
線性漸變可被定義為水平，垂直或角梯度：
- 當y1和y2相等，x1和x2不同水平梯度的創建
- 當X1和X2是等於和y1和y2不同垂直梯度創建
- 當X1和X2不同，y1和y2不同角度梯度創建
例1
定義具有從黃色到紅色的水平線性梯度的橢圓：
下面是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>
試一試» Code explanation:
- 該id的屬性<linearGradient>標籤定義一個唯一的名稱為漸變
- 的X1，X2，Y1，所述的Y2屬性<linearGradient>標籤定義漸變的開始和結束位置
- 顏色範圍的梯度可以由兩種或更多的顏色。 每種顏色都與一個指定<stop>標記。 的offset屬性用來定義漸變顏色的開始和結束
- 的fill屬性的橢圓元件鏈接到梯度
例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>
試一試» Code explanation:
- 該<text>元素用來添加文本