对于一些新手来说，一些复杂的图案所构成的动画效果，往往摸不着头脑，这时我们不得不提出贝塞尔函数，对于大多数常见的图像，往往不是简单的由圆和直线构成的。
1.什么是贝塞尔函数？
一个绘制曲线的函数，先看一个图：
在p1与p2之间找到一点，其位置变量由t决定，通过线性插值我们可以得到p的位置函数B1（t），B1（t）=P1*(1-t)+P2*t,可以发现这是一个直线，那么曲线怎么表达？那就是二次贝塞尔函数，二次贝塞尔函数是由三个点构成，同样我们在P1，p0,p2分别取两个点A，B，他们的位置由变量t决定：可以发现B21=（1-t）p2+tp1,B22（t）=(1-t)p1+tp0。
然后我们连接AB，在AB上取一点P，P仍然由t决定，最后通过线性插值得p的位置函数B2（t）(P的轨迹)就是二次贝塞尔函数曲线，B2（t）=(1-t)B21(t)+tB22(t)
我们主要用到二次贝塞尔函数,也就是三个点确定一条曲线
2.什么是相对位置，什么是绝对位置。
1.坐标建系：假设一个svg画布设置为width=100px height=40px，![]()
那么以画布左上角未坐标原点的确定位置的方法，叫绝对坐标，在<path/>中一般用大写字母表示，而相对坐标，即相对于上一个坐标确定位置的方法。
2.绘制标准图形的svg属性，如：圆，椭圆，直线，矩形，多变形。
1.在介绍这几类标准图形绘制之前，先介绍通用属性：
1.fill:给闭合图形填充颜色
2.stroke-width：边框宽度
3.stroke：边框颜色
4,模糊效果和阴影效果：
模糊效果<feGaussianBlur></feGaussianBlur>通常要这么写
<defs> <filter id=""> <feGaussianBlur></feGaussianBlur> </filter> </defs>stdDeviation=""用来定义模糊的数字，通常情况下值越大，模糊的效果越高：
阴影效果： <feOffset></feOffset>通常情况要这么写：
<filter> <feOffset></feOffset> </filter>在 <feOffset></feOffset>中 <feOffset in="SourceAlpha"></feOffset>表示黑色阴影，dx=""
dy=""表示阴影偏移量
混入原始图像： <feBlend in2="SourceGraphic"></feBlend>
对阴影效果模糊化： <feGaussianBlur stdDeviation=""></feGaussianBlur>
我们举一个简单的例子：
<svg width="140px" height="140px"> <defs> <filter x="0" y="0" id="f1" width="200" height="200"> <feOffset in="SourceAlpha" dx="20" dy="20"></feOffset> <feGaussianBlur stdDeviation="10"></feGaussianBlur> <feBlend in="SourceGraphic"></feBlend> </filter> </defs> <rect width="90px" height="90px" fill="#C8BFE7" stroke-width="4px" stroke="#B965E7"filter="url(#f1)"></rect>5.线性渐变和径向渐变：
线性渐变： <linearGradient></linearGradient>同样要嵌套在<defs></defs>中：
<linearGradient></linearGradient>有水平渐变，垂直渐变，斜向渐变，简而言之就是沿一条直线渐变：x1，y1用来表示渐变的起点，x2,y2用来表示渐变的终点，我们通常把<stop/>嵌套进去表示渐变的颜色，而在stop中属性offset表示渐变颜色的位置，用百分比表示，而stop-color=""表示渐变的颜色。写法：
<defs> <linearGradient x1=""y1=""x2=""y2=""> <stop offset="10%"stop-color=""></stop> </linearGradient> </defs>径向渐变：写法与线性渐变大致相同：
<defs> <radialGradient id="" cx="" cy="" r="" fx="" fy=""></radialGradient> <stop offset="10%" stop-color=""></stop> </defs>2.圆与椭圆：
圆：<circle cx=" 20" cy=" 9" r="50"fill="#C8BFE7"></circle>
cx cy表示圆的圆点坐标，r 表示半径
椭圆： <ellipse cx=" 40"cy=" 60"rx=" 30"ry=" 60"fill="#C8BFE7"></ellipse>
3.矩形与多边形 直线：
矩形： <rect width="100px" height="40px" fill="#C8BFE7" stroke-width="4px"stroke="#B965E7"></rect>
多边形： <polygon points="220,20 60,90 90,346"></polygon>
两个值表示一个点，points至少要有三个，
直线： <line x1="20" y1="30" y2="80"x2="69" fill="#C8BFE7"stroke="#B965E7"></line>
3.绘制不规则图案path:
<path d="M50,320 L50,320 54,324 C54,320 35,348 38,362 C38,362 34,352 34,352 L34,352 100,452 L100,452 115,450 L97,415 147,390 C147,390 140,324 140,324 L140,324,140,320 Z " fill="#FCD2BB"></path>1.M表示起点，L表示直线，C表示曲线，Z表示连接原始点。
2.绘制斜线时，如何保持角度不变，长度增加，
我们都知道一次函数，y=kx+b，在知道原来的两个坐标后，就可以求出k和b,
对于斜线长度d=√(x2-x1)²+（y2-y1)²根据这两个公式，就可以求出增加后新坐标，
1.比方说对于45°倾斜斜线，y=x，如果是对于画布来说只要满足y=x坐标，y2>y1,x2>x1那么斜线的长度就会增大，单如果说起始点不为原点（0，0）的45°倾斜角，这个时候我们就应该借用一些数学工具，desmos,以第一象限为准，打个比方随便两个点,在画布width="100px" height="150px"上
一条斜线L20 30 89 72，由于方便在desmos上比较方便看，等比例width=1,height=1.5变换那么L0.2 0.3 0.89 0.72 则k=0.608696
根据这个工具直接取点，改变长度，斜率还不会发生改变。
3.绘制斜线时，如何保持斜度不变，改变斜线位置，
利用滑块的建立，就可以改变斜线的位置了
4.绘制曲线时,改变曲线位置，
1.设定贝塞尔曲线x4,y4的表达式，以线性回归表达直线，设立三个可以移动的点（x1,y1）(x2,y2)(x3,y3)
比如说：
再根据svg画布大小换算一下坐标就可以了
