让 svg 动起来吧！

想必大家对 svg 肯定不会陌生吧，像平时用到的 icon 图标就是最简单的 svg 图形，但怎么样能让 svg 动起来呢？

那就从最基本的svg 构成开始开始说起吧！

svg 它的英文全称为Scalable Vector Graphics，意为可缩放的矢量图形，是一种标准的图形文件类型，基于XML来描述二维图型和绘图程序的语言,可以在浏览器中直接显示，也可以在图像编辑软件中编辑和创建 在放大或改变图像尺寸的情况下其图形质量也不会有所损失。

与其他图像格式相比（比如jpge和 gif）,使用 svg 的优势在于 ：

tips：

在开发的过程中 svg 的用途也较为广泛，小到网站的logo,大到大屏的数据可视化，作为矢量图，svg能够做到适应各个屏幕的展示而不失真。

由于svg格式文件的简单性和明确定义的边界，大多数图标都可以很好地转换为矢量。按钮等页面元素的图标需要对不同的屏幕尺寸做出响应，这意味着这些图标必须具有完美的可扩展性。

推荐的图标库: iconfont 、iconpark、Font Awesome

svg支持在任何分辨率下的高质量打印，所以svg格式文件特别适合以不同形式展并打印在任何商品上起到品牌的宣传效益。同样，logo的设计往往更简单，这很好地适用于svg格式文件。

矢量也非常适合非照片视觉艺术。如果添加为svg格式文件，网页上的装饰图既可以轻松缩放，又可以节省文件空间。甚至是插画中形状的纹理，都可以使用svg格式文件来实现。

数据内容丰富的网站或应用程序需要借助信息图表或插图图表来传达数据信息，帮助用户清晰理解数据。svg格式文件可以将设计无缝扩展，将图表设计为基于实时数据输入动态更新的 svg。

svg 图像可以通过 CSS 和 JavaScript 进行样式和交互的控制，使其更加灵活和多样化，实现动画、图表的动态交互。

正如我们所看到的，svg的应用几乎无处不在，高效、便捷的适用于各种场景。

了解了以上那么多关于 svg 的理论与应用，光说不练假把式，

这一章节就让我们一起来实操一下，深入体会一把 svg 是如何绘制的吧！！！

svg 的实现效果可以在 菜鸟 - 在线svg编辑器 中在线的绘制。

svg 的图像代码都在 根元素下：

标签中的 width、height 属性指定了 svg 图像所占据 html 元素的宽高比。

除了相对单位，也可以采用绝对单位（px）

svg 图像默认大小300(px) x 150(px)

viewBox： 将展示指定范围内 svg 的部分图像

viewBox的四个参数分别是左上角的横、纵坐标、视口的宽、高

视口必须适配所在的空间，视口小于图像时视口会放大、缩小相应的倍数去适配 svg 图像的大小

视口与空间的适配，当视口视口与 svg 的宽高一致时，所展现的内容是正常比例，

例如下图的矩形所在的位置及大小是正常的 100 × 100，不会被视口缩放

如果视口的大小是 50 x 50，由于 svg 图像的大小是 100 x 100，所以视口会放大去适配 svg图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 svg 图像的长宽比。

这时，svg 图像的默认大小将等于所在的 HTML 元素的大小。

svg 中的 标签用于创建矩形

react 绘制过程中常见的属性：

react 圆角设置

rx：圆角x方位的半径

ry：圆角y方位的半径

标签用于绘制路径

如下图从iconfont中下载的 svg 图标

这里绘制了一个向下的箭头，其中d序列中的每个字母表示一个绘制动作，后面跟着绘制的坐标位置。

绘制圆

在绘制圆时

如果省略cx和cy，圆心的位置会被设置为(0, 0)

绘制椭圆

能够用来绘制直线

polyline 顾名思义与line标签相似，不同的是 能够实现折线的绘制，通过折线也能实现图形的闭合,如长方形的绘制：

polygon 多边形绘制，与折线类似，通过 points 定位每个点的坐标，根据坐标依次进行绘制。

例如菱形的实现：

横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

svg 文件可通过以下标签嵌入 html 文档：、 或者 。

svg 代码可以直接嵌入到 html 页面中

使用 img 的 src 属性链接到文件中。

下面将介绍三种方式来实现 svg 的动画效果：

通过 animate 标签可以实现图像的动态效果

实现了方块在 2s 内 x 水平位置的位移变化，并实现动画的无限循环播放。

可以定义多个属性的动画效果来实现更为复杂的动画效果。

结合多个 animate 实现位置与宽度的同时变化：

由于 标签对 CSS 的 transform 属性不起作用，所以在需要对图像变形时，要使用 标签实现动画效果。

的效果为旋转（rotate），

在 svg 中同样可以通过css样式来控制 icon 的颜色填充与样式描边，甚至可以结合 animation 实现 icon 的动画效果的绘制。

先来看一下我们将要实现的效果：

为 icon 描边后进行填充 首先我们可以从 iconfont 中挑选一个喜欢的 icon

其中 path 为 icon 的绘制路径，调整 icon 初始路径的样式：

填充色 fill="#fff" 、描边及描边的线条粗细 stroke="#1875F0"、stroke-width="10"

并为 path 添加 class 属性，此后可通过 css 样式控制 svg 的样式及交互，实现 icon 的动画展示。

通过 css 样式为 icon 添加动画效果

这时我们会用到路径描边 stroke 的两个属性

stroke-dasharray

stroke-dasharray：100 时 虚线长度为100，虚线之间的间距也为100。

同样的 stroke-dasharray 支持数组参数

当传入两个参数时：一个表示长度，一个表示间距。

当传入三个参数时：表示 虚线长度，间距，虚线长度，如此循环往复绘制图形的描边。

stroke-dashoffset

stroke-dashoffset 相对于起始点的偏移：

需要注意的是，不管偏移的方向是哪一边，dasharray 是 虚线-间隔-虚线-间隔 循环的。

dashoffset 属性需要搭配 dasharray 属性才能看得出效果，因为不是虚线的话是无法看出偏移的。

这里可以参考一下 MDN 的例子，其中红色表示偏移量

dasharray & dashoffset 的使用

dashoffset 与 dasharray 搭配食用可以用于实现动态描边、进度条加载的效果

CSS动画实现的效果：

整个过程从慢到快，持续 8s， 无限循环

其中 stroke-dashoffset: 4392 到 0 实现了描边路径从无到有的过程

stroke-dashoffset 空白间隙偏移为4392 时，那就是 4392 - 4392 = 0，此时的 path 为 0

当 stroke-dashoffset 空白间隙偏移为 0, 4392 - 0 = 4392，也就是这个图标足够显示的路径长度

stroke-dashoffset 的路径长度可以通过以下方式获取

找到 path 的最大路径长度作为 stroke-dashoffset 绘制的最大间隙

icon 绘制的完整代码：

通过 svg 的 react 标签绘制最简单的播放 icon ，每一个长方形都是一个 react，再利用 animate 让播放 icon 的每个方块律动起来。

icon 所要实现的效果如下图所示：

animate 中的 values 用来设置目标属性在各个关键帧值的大小。它的值是一个由分号组成的列表，每项的类型取决于 attributeName 操作属性的值类型。

在制作的过程中分析动画所涉及的属性，耐心调整动画的速度以达到自己想要的变化效果。律动的 icon 就是那么简单的实现啦，大家可以一起来试一试哦！

本文介绍了 svg 图像的相关使用，并通过几个简单的小案例实现了 svg 最基本的使用和动画。

当然 svg 还能呈现出更加丰富多彩的动画效果，例如 炫酷的 霓虹灯字体，

如果大家感兴趣的话可以继续研究哦！

😊 相信在你的打磨和实践之下一定可以做出自己满意的动画 ！！！