SVG线性渐变色

SVG渐变色

渐变色(gradient)是指从一种颜色平滑的过渡到另外一种颜色。而且，我们可以将多种渐变色应用到同一个网页元素上。

在SVG里，有两种主要的渐变色类型：

• 线性渐变色 Linear
• 辐射式(放射式)渐变色 Radial

SVG线性渐变色 – <linearGradient>

<linearGradient>标记就是用来定义渐变色的。

<linearGradient>标记必须放在<defs>标记内。<defs>标记就是“definitions”单词的简写，用来容纳其它各种SVG标记。

线性渐变色可以定义成水平渐变色，垂直渐变色和斜向渐变色：

• 当y1和y2相等，而x1和x2不等时，就形成了水平渐变色
• 当y1和y2不等，而x1和x2相等时，就形成了垂直渐变色
• 当y1和y2不等，而x1和x2也不等时，就形成了斜向渐变色

例 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>

代码说明：

• <linearGradient>标记的id属性定义了这个渐变色的唯一标志
• <linearGradient>标记的x1, x2, y1,y2四个属性定义了渐变色的起始位置和终止位置
• 渐变色的颜色组成可以是2个或2个以上的颜色。每种颜色都使用一个<stop>标记定义。offset属性用来定义渐变色的开始和结束位置。
• 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>

代码说明：

• <text>标记的作用是添加一段文字