svg动画制作

## 1 章节目录

### 1.1 目标

- SVG 阴影
- SVG 渐变
- SVG 动画

### 1.2 重点

- SVG 阴影
- SVG 动画

### 1.3 难点

- SVG 动画

## 2 SVG 阴影

### 2.1 <defs> 

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在 <defs> 元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在 <defs>元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use>元素呈现这些元素。

### 2.2 <filter>
<filter> 元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的 `filter` 属性引用一个滤镜。

### 2.3 <feOffset> 和 <feBlend>

<feOffset> 将输入图像作为一个整体，通过属性 dx 和属性 dy 的值指定一个偏移量。

<feBlend> 滤镜把两个对象组合在一起，使它们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。

将 <feOffset> 和 <feBlend> 结合在一起，即可创建图形的阴影效果。

### 2.4 <feGaussianBlur>

<feGaussianBlur> 滤镜可以对输入图像进行高斯模糊，并通过属性 stdDeviation 指定偏移的像素数量。

### 2.5 <feColorMatrix>

<feColorMatrix> 滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值（一个表示为 [红，