快捷导航

栏目导航

SVG <linearGradient>线性渐变

2018-2-6 01:40| 发布者: admin| 查看: 716| 评论: 0|来自: 钱柜手机网页版

线性渐变就是沿着一条轴线(水平、垂直或者倾斜)以渐变的方式从一种颜色逐渐过渡到另一种。

关于径向渐变参阅SVG <radialGradient>径向渐变一章节。

看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

<linearGradient>可以创建线性渐变,元素本身具有若干属性,内部也有若干子元素,下面分别做一下介绍。

一.<stop>元素:

此元素用来进行渐变区域的划分和定义渐变的区域的相关颜色等功能。

[XML] 纯文本查看 复制代码
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />

上面的代码表示渐变从引用元素的0%开始到100%结束,从红色逐渐渐变到蓝色。

offset参数值可以是百分数,也可以是小数,再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear">
        <stop offset="0" stop-color="red" />
        <stop offset="0.3" stop-color="green"  stop-opacity="0.5"/>
        <stop offset="1" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

offset使用小数作为参数(作用和百分数完全相同),定义了三个渐变色。

从0-0.3区域是红色到绿色过渡,0.3-1区域是绿色到蓝色过渡。

特别说明:offset规定的点的颜色都是纯色,比如0处是纯红色,0.3处是纯绿色。

stop-opacity属性定义对应渐变色的透明度。

二.<linearGradient>元素属性:

(1).id属性值必须要规定,否则就没法使用这个渐变:

[XML] 纯文本查看 复制代码
<rect x="10" y="10" width="400" height="100" fill="url(#linear)" />

(2).gradientUnits属性:

此属性定义渐变色使用的坐标单位,有2个可用值:userSpaceOnUse和objectBoundingBox(默认值)。

gradientUnits属性和x1、y1、x2、y2属性配合使用,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      gradientUnits="objectBoundingBox"
                      x1="0" y1="0"
                      x2="1" y2="0">
        <stop offset="0" stop-color="red" />
        <stop offset="1" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

x1、y1、x2、y2属性用来规定引用渐变的元素渐变区域和渐变的方向。

x方向上渐变从0(0%)开始,到1(100%)结束;y方向上始终在0(0%)位置;一个水平渐变。

gradientUnits属性定义渐变色使用的坐标单位:

(1).objectBoundingBox:x1、y1、x2和y2属性值介于0 - 1(可以是百分数)之间,表示使用应用渐变效果的元素的包围盒作为坐标系统。也就是说渐变随着使用渐变的元素进行缩放。

(2).userSpaceOnUse:x1、y1、x2和y2表示当前用户坐标系统的坐标,都是绝对值。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      gradientUnits="objectBoundingBox"
                      x1="0" y1="0"
                      x2="1" y2="1">
        <stop offset="0" stop-color="red" />
        <stop offset="1" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

上面的代码规定了一个从左上角到右下角倾斜的渐变。

三.spreadMethod属性:

此属性规定渐变色到达它的终点时应该采取的行为。

具有三个属性值,分别是pad(默认值)、reflect和repeat,下面就通过代码进行一下演示:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      x1="0.2" y1="0"
                      x2="0.6" y2="0"
                      spreadMethod="pad"
                      >
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

矩形渐变区域是0.2-0.6;spreadMethod="pad"表示渐变区域之外的区域使用对应的<stop>规定的颜色填充。

如上面的代码,0-0.2区域使用红色填充,0.6-1区域使用蓝色填充。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      x1="0.2" y1="0"
                      x2="0.6" y2="0"
                      spreadMethod="reflect"
                      >
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

spreadMethod="reflect"会让渐变色继续,只不过渐变色会反向继续渲染,从最后一个颜色开始到第一个颜色这个顺序渲染;等到再次到达渐变色终点时,再反序,如此这般直到对象填充完毕。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      x1="0.2" y1="0"
                      x2="0.6" y2="0"
                      spreadMethod="repeat"
                      >
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

repeat也会让渐变色继续渲染,但是不会反序,只是直截了当的进行重复渐变。

四.gradientTransform属性:

此属性可以给渐变添加rotate()和translate()等变换,与普通SVG图形元素transform类似,具体参阅SVG transform用法一章节,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:600px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
                      x1="0" y1="0"
                      x2="1" y2="0"
                      spreadMethod="repeat"
                      gradientTransform="rotate(90)"
                      >
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="400" fill="url(#linear)" />
  </svg>                           
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-16 08:36 , Processed in 0.299042 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部