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 代码

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

定义和使用

SVG <linearGradient> 元素

示例

相关页面