svg中的有path选择器来定义路径。
path选择器里属性有:
d属性用来定义路径数据stroke:描边颜色stroke-width:描边宽度fill:填充颜色stroke-dasharray:间隔多少像素绘制一次stroke-dashoffset:每次绘制偏离多少,必须配合stroke-dasharray使用
d属性参数有:
M = moveto(M X,Y) :将画笔移动到指定的坐标位置L = lineto(L X,Y) :画直线到指定的坐标位置H = horizontal lineto(H X):画水平线到指定的X坐标位置V = vertical lineto(V Y):画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY):平滑曲率Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y): 椭圆弧Z = closepath():关闭路径
根据项目主要学习的是a或者A来记录
elliptical Arc椭圆弧的记录如下:
指令:A (绝对) a (相对)椭圆弧的参数形式:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)详解参数:rx ry 是椭圆的两个半轴的长度。x-axis-rotation 是椭圆相对于坐标系的旋转角度,角度数而非弧度数。large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。x y 是圆弧终点的坐标。
stroke=”#20a0ff” fill=”none” stroke-linecap=”round” />
stroke=”#20a0ff” fill=”none” stroke-linecap=”round” />
感谢这些博主的知识支持:https://blog.csdn.net/cuixipi…https://segmentfault.com/a/11…
本文由乐趣区整理发布,转载请注明出处,谢谢。