• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • SVG 渐变 - 线性

    SVG 渐变

    渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

    SVG渐变主要有两种类型:

    • Linear
    • Radial

    SVG 线性渐变- <linearGradient>

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

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

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

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

    实例 1

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

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <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

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

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <lineargradient id="grad1" 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(#grad1)" />
    </svg>

    实例 3

    定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本:

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <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)" />
      <text fill="#ffffff" font-size="45" font-family="verdana" x="150" y="86">
      svg</text>
    </svg>

    代码解析:

    • <text>元素是用来添加一个文本

    上篇:SVG 阴影

    下篇:SVG 参考手册