W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

SVG 渐变 - 线性



SVG 渐变

渐变是从一种颜色到另一种颜色的平滑过渡。此外,可以将多个颜色转换应用于同一元素。

SVG有两种主要的渐变类型:

  • 线性
  • 径向(放射性)

SVG 线性渐变 - <linearGradient>

<linearGradient> 元素用于定义线性渐变。

<linearGradient> 元素必须嵌套在 <defs> 的内部。<defs> 标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平,垂直或角度渐变:

  • 当y1和y2相等,而x1和x2不同时,可创建水平渐变
  • 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
  • 当x1和x2不同,且y1和y2不同时,可创建角形渐变

实例 1

用黄色到红色的水平线性渐变定义椭圆形:

Sorry, your browser does not support inline SVG.

SVG代码如下:

Example

<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属性定义渐变开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
  • 填充属性把 ellipse 元素链接到此渐变

实例 2

定义一个垂直线性渐变从黄色到红色的椭圆形:

Sorry, your browser does not support inline SVG.

SVG代码如下:

Example

<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 Sorry, your browser does not support inline SVG.

SVG代码如下:

Example

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