前言在日常的开发过程中，我们或多或少都接触过SVG，可能用它来绘制一些简单的图形，或者用它来构建项目的字体文件库，甚至用它来绘制一些复杂的可视化模块。本文将详细介绍SVG的基本图形和常见的动画形式，帮助您了解SVG的基础知识。下面将介绍SVG的几种预设形状及其对应的属性。在实际的开发或者设计过程中，绘制SVG图标很多时候都会用到一些工具。矩形svg标签中，width代表整个宽度，height代表高度，version代表版本，xmlns代表命名空间，后面两个属性是比较固定的东西，稍微了解一下就够了。rect中的label属性和style属性解释如下：width:宽度height:高度x:水平方向偏移y:垂直方向偏移rx,ry:定义圆角效果style:style(这些样式是一样的适用于下图，所以下图只介绍属性，不再重复样式)fill:rgbcolor,表示矩形的填充颜色fill-opacity:填充的不透明度stroke:rgbcolor,表示矩形的边框颜色stroke-width：矩形边框的大小stroke-opacity：矩形边框圆的不透明度circle标签属性解释如下：cx,cy：圆心坐标r：圆半径Ellipse椭圆标签属性解释如下：cx：圆心x坐标cy：圆心y坐标rx：水平半径ry：垂直半径线线标签属性解释如下：x1：线段起点的x坐标x2：线段终点的x坐标y1：线段起点的y坐标y2：线段终点的y坐标Polygon多边形标签属性解释如下：points:N(x,y)坐标定义多边形，不少于三个点和折线折线标签属性解释如下：points：定义曲线的N(x,y)坐标PS：看看这条曲线，是不是很像离你最近的股票基金路径路径标签中的属性d是用来描述路径的，有很多技巧，我们一一看Mmoveto，意思是移动到某个点，想象你手里拿着一支笔，M命令就是把你的笔尖移动到某个点，准备开始画画。语法为M(x,y)，其中大写M表示绝对定位，小写m表示相对定位，以下其他语法相同。Zclosepath，关闭你之前绘制的路径。Llineto表示画一条线，语法为L(x,y)。Hhorizo??ntallineto，水平画一条线。语法是H(y)Vverticallineto，垂直画一条线。语法是V(x)Ccurveto，三次贝塞尔曲线。语法是Cx1y1,x2y2,xy。三次贝塞尔曲线应该有四个点来控制，C中只描述了三个点，所以起点就是你用M描述的。例如：M1010C10010015010020010表示起点是（10,10)，第一个辅助点为(100,100)，第二个辅助点为(150,100)，终点为(200,10)受控三次贝塞尔曲线。Ssmoothcurveto，用来描述对称的三次贝塞尔曲线。语法为Sx2y2,xy。当S跟在S命令或C命令之后，如果前面没有S或??C命令，它的第一个控制点（即S语法中省略的x1y1）将被假定为前一个控制点的对称点,它的两个控制点将被认为是同一个点。Q二次贝塞尔曲线，只需要一个控制点。语法是Qx1y1,xyT类似于S，从之前的控制点推断出一个新的控制点。语法是TxyAellipticalArc，椭圆弧。语法为Arxryx-axis-rotationlarge-arc-flagsweep-flagxyrx,ry椭圆弧的两个半轴长，如果相等则为圆弧x-axis-rotation的椭圆相对坐标系旋转角度大-arc-flag绘制上弧（1），下弧（0）sweep-flag顺时针绘制（1），逆时针绘制（0）xy弧结束坐标路径的绘制非常复杂。.推荐使用SVG编辑器辅助绘制图形。SVG动画在上面，我们了解了各种SVG图形和语法。除了可以绘制多种图形，SVG的动画效果也别具一格。下面我们就来看看SVG常见的动画形式和应用。描边动画下面先介绍两个属性，stroke-dasharray和stroke-dashoffset。我们实现的笔划动画就是围绕这两个属性展开的。stroke-dasharray用于创建虚线，语法为stroke-dasharray:n1[n2[n3]]。这意味着什么？先看下面的例子结合上图我们可以总结出stroke-dasharray的规则：一个参数描述相同长度的实线和虚线。比如stroke-dasharray:10表示描述这条路径时，长度为10的实线->长度为10的虚线->长度为10的实线……等等。在描述两个参数时，实线的长度为第一个参数，虚线的长度为第二个参数。stroke-dasharray:1020表示10条实线的长度->20条虚线的长度->10条实线的长度……以此类推。三个参数交替描述实线和虚线的长度，stroke-dasharray:102030表示10长实线->20长虚线->30长实线->10长虚线...等等。stroke-dashoffset表示虚线的偏移量。正值表示反方向偏移，负值表示正方向偏移。从图中可以看出，我们把路径分为400条实线和400条虚线。移动200，可以走完实线的200长度，走完图中只有一半的路径。从那以后，我们就可以利用这两个属性来制作路径动画了，无非就是将这两个属性与CSS动画动画结合起来。让我们从一些简单的事情开始，比如从头开始制作下面的线条动画：.line{stroke-width:4px;描边：红色；中风-dasharray：400；笔画偏移量：400；动画：移动2s；}@keyframes将{移动到{stroke-dashoffset：0；}}从零开始有了简单的动画之后，不难发现它不仅仅可以作用在一条简单的直线上，比如我们现在有一个如下的SVG图形，我们也可以做描边动画。在开始之前，我们先介绍路径元素中的一个方法——getTotalLength()，它返回路径总长度的计算值（以用户为单位）。我们可以用它来计算任何路径元素的总长度。有了以上知识，我们大概就做出了上面的动画，下面是实现代码
