这是SVG系列目录:
- 前端必知必会 | 学SVG看这篇就够了(一)
- 前端必知必会 | 学SVG看这篇就够了(二)
- 前端必知必会 | 学SVG看这篇就够了(三)
- 前端必知必会 | 学SVG看这篇就够了(四)
- 前端必知必会 | 学SVG看这篇就够了(五)
前言
在SVG
中,并非只能填充图形颜色和添加描边,你也可以像CSS
一样,给绘制的图形应用添加渐变色。分为线性渐变、径向渐变,具体如何应用渐变色我们进行看下去:
在SVG中我们不能使用linear-gradient函数,这是无效代码!!!
线性渐变
线性渐变是沿着直线改变颜色,我们看一个线性渐变的例子:
<svg width="300" height="500">
<defs>
<linearGradient id="test">
<stop offset="5%" stop-color="#12c2e9" />
<stop offset="85%" stop-color="#c471ed" />
</linearGradient>
</defs>
<rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
我们在画布中创建一个defs
元素(稍后会讲到),在内部创建一个linearGradient
标签(该标签用于定义线性渐变,应用于图形元素的填充、描边)。内部放了两个stop标签,这两个标签通过指定的位置offset
属性和stop-color
属性来说明在渐变的特定位置上渲染指定的颜色。
这里要注意的是offset
值是从0
开始的,范围为0%—100%
(或者是0—1
),如果出现位置重合,将采用后面设置的值。
stop
标签一共有三个属性,上面我们已经展示了stop
标签的两个属性,还有一个stop-opacity
属性,用于设置某个位置的透明度。
<stop offset="85%" stop-color="gold" stop-opacity="0"/>
使用渐变需要在图形标签上使用stroke
、fill
进行引用,使用url
引用元素的方式将渐变的ID值传入即可。(stroke
也是同样操作)
linearGradient
标签中你还可以定义渐变的开始和结束位置。它们分别是x1
、x2
、y1
、y2
。默认是水平渐变的,可以通过修改这些属性来改变渐变的方向,下面看看垂直渐变的例子:
<svg width="300" height="500">
<defs>
<linearGradient id="test" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="5%" stop-color="#12c2e9" />
<stop offset="85%" stop-color="#c471ed" stop-opacity="0" />
</linearGradient>
</defs>
<rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
- 当
y1
和y2
相等,而 x1 和x2
不同时,可创建水平渐变 - 当
x1
和x2
相等,而 y1 和y2
不同时,可创建垂直渐变 - 当
x1
和x2
不同,且 y1 和y2
不同时,可创建角形渐变
径向渐变
与线性渐变的用法类似,只不过是它是从一个点开始发散绘制渐变。我们看看一个径向渐变的例子:
<svg width="300" height="500">
<defs>
<radialGradient id="test">
<stop offset="5%" stop-color="#0f0c29" />
<stop offset="55%" stop-color="#302b63" />
</radialGradient >
</defs>
<rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
stop
用法和线性渐变的用法是一样的,深蓝色现在正在向边缘的方向渐渐的变成灰白色。在线性渐变中我们可以控制渐变的方向。同样,径向渐变中也可以控制渐变的中心点位置。它的属性有cx
、cy
、r、fx
、fy
,分别代表的是圆形中心点位置,半径、渐变边缘的位置(范围0—1
)。
<svg width="300" height="500">
<defs>
<radialGradient id="test" cx="0" cy="0" r="0.5" fy="0.25" fx="0.25">
<stop offset="0%" stop-color="#0f0c29" />
<stop offset="100%" stop-color="#302b63" />
</radialGradient >
</defs>
<rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
defs and use
在上面的例子,外面使用了defs
标签包裹了linearGradient
标签,那这个defs
标签有什么作用呢?
defs
标签是 definitions
的缩写,它可对诸如渐变之类的特殊元素进行定义。
defs
它用于预定义一个元素使其能够在SVG
图像中重复使用。在defs
元素中定义的图形不会直接呈现。 你可以在你的视口的任意地方利用use标签呈现这些标签。
use
在defs
标签中定义的图形不会直接显示在SVG图像上此时需要使用use
元素来引入它们渲染到页面。
一个简单的使用例子:
<svg width="300" height="300">
<defs>
<g id="copyme">
<circle r="10"/>
</g>
</defs>
<use x="10" y="10" xlink:href="#copyme" />
<use x="50" y="10" xlink:href="#copyme" />
</svg>
最后
本篇文章讲述了在SVG
中的如何在创建渐变,并引用到绘制的图形中,之后又扩展了defs
和use
标签相关知识,感谢你的阅读!
😀😀 关注我,不迷路! 😀😀