SVG 线性渐变



  • 定义和使用

    渐变是从一种颜色到另一种颜色的平滑过渡;此外,可以将多个颜色过渡应用于同一元素。
    SVG 中有两种主要的渐变类型:
    • Linear-线性的
    • Radial-径向的
  • SVG <linearGradient> 元素

    <linearGradient> 元素用于定义线性渐变。
    <linearGradient> 元素必须嵌套在 <defs> 标记内;<defs> 标签是定义的缩写,包含特殊元素(例如渐变)的定义。
    线性渐变可以定义为水平,垂直或角度渐变:
    • 当 y1 和 y2 相等且 x1 和 x2 不同时,将创建水平渐变
    • 当 x1 和 x2 相等且 y1 和 y2 不同时,将创建垂直渐变
    • 当 x1 和 x2 不同且 y1 和 y2 不同时,将创建角度渐变
  • 示例

    用从黄色到红色的水平线性渐变定义一个椭圆:
       
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到蝴蝶教程</title>
    </head>
    <body>
      <h1>SVG 线性渐变</h1>
      <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>
    </body>
    </html>
    
    
    上面示例代码说明:
    • <linearGradient> 标记的 id 属性定义渐变的唯一名称
    • 标记的 x1,x2,y1,y2 属性定义渐变的开始和结束位置
    • 渐变的颜色范围可以由两种或更多种颜色组成;每种颜色都用 <stop> 标签指定;offset 属性用于定义渐变颜色的开始和结束位置
    • fill 属性将椭圆元素链接到渐变
    定义从黄色到红色的垂直线性渐变的椭圆:
       
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到蝴蝶教程</title>
    </head>
    <body>
      <h1>SVG 线性渐变</h1>
      <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,0,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
      </svg>
    </body>
    </html>
    
    
    定义一个具有从黄色到红色的水平线性渐变的椭圆,并在椭圆内添加文本:
        SVG
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到蝴蝶教程</title>
    </head>
    <body>
      <h1>SVG 线性渐变</h1>
      <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>
    </body>
    </html>
    
    
    上面示例代码说明:
    • <text> 元素用于添加文本