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>元素用来添加文本