SVG <linearGradient> 线性渐变

2018-11-4 00:07| 作者: admin| 查看: 2019| 评论: 0|来自: 蚂蚁部落

线性渐变是沿着一条轴线,实现颜色值的过渡效果。

轴线可以是水平、垂直或者倾斜,下面通过代码实例介绍具体细节。

与线性渐变类似的还有径向渐变,具体参阅SVG <radialGradient> 径向渐变一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000857y5gilpwgwg6di5pn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码实现了由红色到蓝色的线性渐变效果。

渐变是通过<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="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear">
        <stop offset="10%" stop-color="red" />
        <stop offset="50%" stop-color="green" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000955etyhhypzy6ty3syj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过<stop>元素将渐变分为两段,从红色到绿色,再由绿色到蓝色。

(2).红色渐变是从10%处开始的,0-10%这段空间使用红色填充。

(3).在offset规定的值处,颜色是stop-color规定的颜色值。

stop-color属性:

此属性用于规定渐变的颜色,在上面已经介绍,不再多言。

二.<linearGradient>元素的属性:

(1).id属性:

此属性是必须的,否则无法使用此渐变。

代码片段如下:

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

<rect>矩形元素使用渐变就是利用id属性值实现的。

(2).gradientUnits属性:

gradientUnits具有两个属性值,分别如下:

(1).objectBoundingBox,默认值。

(2).userSpaceOnUse。

首先看一段代码实例,然后进行分析:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  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>

gradientUnits属性详细阐述:

(1).当属性值为objectBoundingBox时,表示将以应用渐变的元素形成的坐标系统为参考,x1、y1、x2与y2属性值都是0-1之间的数字,当然也可以是百分比数字(0-100%),那么渐变的尺寸是一个相对值,随元素尺寸变化而发生改变。

(2).当属性值为userSpaceOnUse时,以当前用户坐标系统为参考,x1、y1、x2与y2都是绝对值。

x1、y1、x2与y2属性:

在前文已经对四个属性有所涉及,(x1、y1)与(x2、y2)形成两个点。

两个点可以连接成一条轴线,能够确定元素的渐变区域与渐变方向。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
width:400px;
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001134mhaohb11t1ha7zrz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

三.spreadMethod属性:

此属性用于规定处理渐变区域之外的区域的方式。

具有三个属性值:

(1).pad(默认值)。

(2).reflect。

(3).repeat。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" 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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001210u2uozsbz6u2pr2kd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).规定引用元素的渐变区域是0.3-0.7之间,也就是30%-70%之间的区域。

(2).在此渐变区域,实现由红色到蓝色的渐变效果。

(3).<stop>元素规定渐变从元素渐变区域0%处开始至100%处结束。

(4).spreadMethod属性值pad表示渐变区域之外的区域使用对应的stop-color规定的颜色填充,于是渐变区域的左侧使用红色填充,渐变区域的右侧使用蓝色填充。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" 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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001257o6f1kywyfynpy36i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当spreadMethod属性值为reflect,表示渐变区域之外的区域会进行渐变。

不过渐变是反向的,按照从最后一个颜色到第一个颜色顺序进行渐变。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" 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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001330a6mijf4czj3b43i2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当spreadMethod属性值为repeat,渐变区域之外的区域同样会进行渐变,不过没有反序。

四.gradientTransform属性:

此属性实现rotate和translate等变换,具体参阅SVG transform用法一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        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="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001418a7zeye199yerz7jm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将渐变旋转了90度角。


鲜花

握手

雷人

路过

鸡蛋
返回顶部