对于一些新手来说一些复杂的图案所构成的动画效果往往摸不着头脑这时我们不得不提出贝塞尔函数对于大多数常见的图像往往不是简单的由圆和直线构成的。1.什么是贝塞尔函数一个绘制曲线的函数先看一个图在p1与p2之间找到一点其位置变量由t决定通过线性插值我们可以得到p的位置函数B1tB1tP1*(1-t)P2*t,可以发现这是一个直线那么曲线怎么表达那就是二次贝塞尔函数二次贝塞尔函数是由三个点构成同样我们在P1p0,p2分别取两个点AB他们的位置由变量t决定可以发现B211-tp2tp1,B22t(1-t)p1tp0。然后我们连接AB在AB上取一点PP仍然由t决定最后通过线性插值得p的位置函数B2t(P的轨迹)就是二次贝塞尔函数曲线B2t(1-t)B21(t)tB22(t)我们主要用到二次贝塞尔函数,也就是三个点确定一条曲线2.什么是相对位置什么是绝对位置。1.坐标建系假设一个svg画布设置为width100px height40px那么以画布左上角未坐标原点的确定位置的方法叫绝对坐标在path/中一般用大写字母表示而相对坐标即相对于上一个坐标确定位置的方法。2.绘制标准图形的svg属性如圆椭圆直线矩形多变形。1.在介绍这几类标准图形绘制之前先介绍通用属性1.fill:给闭合图形填充颜色2.stroke-width边框宽度3.stroke边框颜色4,模糊效果和阴影效果模糊效果feGaussianBlur/feGaussianBlur通常要这么写defs filter id feGaussianBlur/feGaussianBlur /filter /defsstdDeviation用来定义模糊的数字通常情况下值越大模糊的效果越高阴影效果 feOffset/feOffset通常情况要这么写filter feOffset/feOffset /filter在 feOffset/feOffset中 feOffset inSourceAlpha/feOffset表示黑色阴影dxdy表示阴影偏移量混入原始图像 feBlend in2SourceGraphic/feBlend对阴影效果模糊化 feGaussianBlur stdDeviation/feGaussianBlur我们举一个简单的例子svg width140px height140px defs filter x0 y0 idf1 width200 height200 feOffset inSourceAlpha dx20 dy20/feOffset feGaussianBlur stdDeviation10/feGaussianBlur feBlend inSourceGraphic/feBlend /filter /defs rect width90px height90px fill#C8BFE7 stroke-width4px stroke#B965E7filterurl(#f1)/rect5.线性渐变和径向渐变线性渐变 linearGradient/linearGradient同样要嵌套在defs/defs中linearGradient/linearGradient有水平渐变垂直渐变斜向渐变简而言之就是沿一条直线渐变x1y1用来表示渐变的起点x2,y2用来表示渐变的终点我们通常把stop/嵌套进去表示渐变的颜色而在stop中属性offset表示渐变颜色的位置用百分比表示而stop-color表示渐变的颜色。写法defs linearGradient x1y1x2y2 stop offset10%stop-color/stop /linearGradient /defs径向渐变写法与线性渐变大致相同defs radialGradient id cx cy r fx fy/radialGradient stop offset10% stop-color/stop /defs2.圆与椭圆圆circle cx 20 cy 9 r50fill#C8BFE7/circlecx cy表示圆的圆点坐标r 表示半径椭圆 ellipse cx 40cy 60rx 30ry 60fill#C8BFE7/ellipse3.矩形与多边形 直线矩形 rect width100px height40px fill#C8BFE7 stroke-width4pxstroke#B965E7/rect多边形 polygon points220,20 60,90 90,346/polygon两个值表示一个点points至少要有三个直线 line x120 y130 y280x269 fill#C8BFE7stroke#B965E7/line3.绘制不规则图案path:path dM50,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/path1.M表示起点L表示直线C表示曲线Z表示连接原始点。2.绘制斜线时如何保持角度不变长度增加我们都知道一次函数ykxb在知道原来的两个坐标后就可以求出k和b,对于斜线长度d√(x2-x1)²y2-y1)²根据这两个公式就可以求出增加后新坐标1.比方说对于45°倾斜斜线yx如果是对于画布来说只要满足yx坐标y2y1,x2x1那么斜线的长度就会增大单如果说起始点不为原点00的45°倾斜角这个时候我们就应该借用一些数学工具desmos,以第一象限为准打个比方随便两个点,在画布width100px height150px上一条斜线L20 30 89 72由于方便在desmos上比较方便看等比例width1,height1.5变换那么L0.2 0.3 0.89 0.72 则k0.608696根据这个工具直接取点改变长度斜率还不会发生改变。3.绘制斜线时如何保持斜度不变改变斜线位置利用滑块的建立就可以改变斜线的位置了4.绘制曲线时,改变曲线位置1.设定贝塞尔曲线x4,y4的表达式以线性回归表达直线设立三个可以移动的点x1,y1(x2,y2)(x3,y3)比如说再根据svg画布大小换算一下坐标就可以了