在理解完SVG内在自带的动画能力之后，来理解一下它其他的一些自带的能力。
首先来看一下它的渐变绘制的能力。渐变绘制其实在C55当中也学过，CS5当中也能通过背景颜色的设定给元素设置一些渐变色。SVG当中也是有能力给图形设置渐变颜色的。
要理解渐变色的设置，首先要来看一下有一个非常主要的标签叫做defs。defs实在是一种预定义的意思，便是它在这个标签里面先去定义好一些东西，然后再把这些定义好的东西用在其他的图形元素上。以是defs里面可以预定义很多东西，比如这节课要理解的线性渐变，还有径向渐变，以及其他的像后面要学的滤镜，一些遮罩，这些东西都是可以在defs当中先定义，然后在其他元素上去利用的。
SVG当中的渐变紧张有三种，一种是线性渐变，一种是镜像渐变，还有一种叫做网格渐变。但是网格渐变是SVG2标准里面提出的，很多的浏览器目前还不支持，以是这个东西就不讲了。
这两个渐变，线性渐变和径向渐变紧张来聊一聊线性渐变。由于如果要通过代码自己去写渐变的效果，实在是有点反人类的，非常的不直不雅观，而且写起来肯定不是一件轻松的事情。况且现在有很多的设计工具，比如像vigom，在这种软件里面就可以非常轻松的去设置渐变效果。
设置完之后直接把它复制过来就可以了，复制成SVG的代码，直接就能在项目当中去利用。用这种软件的办法去把想要的渐变效果先调度好，设置好，然后再直接复制过来拿过来用，这样是非常便捷非常高效的。以是一样平常不用去过多的去深入到，详细的线性渐变和径向渐变的代码细节当中。但是由于线性渐变这种渐变的办法在一些效果的实现过程当中可能须要可以去进行一些调度，以是还是要对线性渐变的代码逻辑有一个根本的理解，最少知道它每一部分代码是干什么的，这样哪怕后面合营一些AI工具去做一些调度和处理也会方便很多。
以是这节课紧张就来讲一讲线性渐变。这里先把线性界面的效果去复制一下，把它复制成SVG的代码复制过来，来看一下，大家可以看到效果是不是已经完全的呈现在这里了。然后来看一看详细的代码内容和代码构造，把这个拉长一点。
首先这里最外层还是一个SVG，由于这样单独的把它复制过来本身肯定便是一个SVG的构造。然后把稳这里实在有两部分，一部分是真正的矩形的元素，其余一部分便是刚才说的defs标签。defs标签内部定义了一个LinearGradient，便是刚才给大家展示的线性渐变，同时内部还有两个叫做stop的标签。
先来看一下它的基本利用逻辑，在defs标签当中定义的这些东西本身是看不见的，可以先来试一下。把rect矩形图形取消掉之后，渐变虽然在这里面定义了，但是在画面当中是完备看不见的。把这个东西规复一下，规复完之后就能看到渐变效果在这样一个矩形上产生效果了。
它是如何产生效果的？这个界面有一个id，这个id被绑定到了矩形的fi0l属性上，用一个url括弧的办法，用井号表示是id。这里这里，便是这个id名。这样就相称于这个矩形在添补的时候就引用到了，利用到了这个已经在这个SVG的defs中定义好的渐变效果了。
像这种渐变的定义以及其他的这种在defs中定义好的东西都是可以重复利用的。什么意思？先把这样一个SVG的尺寸给它调大一点，把它高度调大一点，比如说调到800，这个viewBox这里也把它调一下，让它保持同步，这样方便去看，这样看起来更清晰一点。
然后这里再来一个rect，这个y调下来一点，调成个400旁边，这个尺寸随意给它调一下。这个view我也把它改成跟上面这个千篇一律的，这里你看它没有渐变效果，这是由于这个宽度太小了，给它改成900，你看到它这个效果是不是就出来了。
以是像这样一些预定义好的东西都是可以在不同的元素上去利用的，也便是说它们都是可以重复利用的。而且不只是这种添补，来看一下，如果让它设置在边框上实在也一样是可以用的。把这个轻微移出来一点，宽度给它设置个小一点，给它加一个边框，边框stroke这里该当便是设置颜色的，以是把这个添补复制过来，这里的添补就让它删掉好了。
然后把这个边框弄大一点，你看是不是边框也能起效果，以是它只假如能利用颜色的地方都是可以用的。只要你用上这个urI()，一个括弧，然后把对应的渐变的id写上去，记得前面加个井号就能把它用过来了。以是这个便是它的一个基本的利用逻辑。