SVG相关学习SVGSVG指的是可缩放矢量图形（ScalableVectorGraphics）SVGviewBoxviewportsvgactualsizeviewBox="x,y,width,height"//x：左上角的横坐标，y：左上角的纵坐标，width：宽度，height：高度viewportbox：选择视口大小的元素box并缩放到视口的大小preserveAspectRatio()第一个值表示viewBox如何与SVG视口对齐；第二个值指示如何保持纵横比（如果有）满足在大比例方向缩放时保持纵横比以适应视口切片保持纵横比同时保持小比例缩放方向以适应视口无扭曲aspectratiotofullyadapttoviewport参考文章张新旭Gradient线性渐变先定义再引用</svg>gradientUnit属性userSpaceOnUse：（默认值）x1,y1,x2,y2代表当前用户坐标系的坐标，即取值在梯度中是绝对值。objectBoundingBox：x1、y1、x2、y2表示应用渐变的元素创建的边界坐标系。这意味着渐变会随着应用到的元素而缩放。spreadMethod属性pad：（默认值）使用渐变色节点填充剩余空间。例如，如果第一个节点是20%，那么从0%到20%的部分将是相同的颜色。reflect：从'start-to-end'映射渐变模式，然后'end-to-start'，然后'start-to-end'，直到空间被填满。repeat：重复渐变图案，从开始->结束，直到空间被填满。先定义径向渐变再引用stop的属性offset：在径向渐变中，表示点(fx,fy)到圆外缘的距离百分比值。它定义了渐变节点的位置。值从0到1，或0%到100%。stop-color：定义偏移节点位置的颜色stop-opacity：定义颜色节点的透明度，取值从0到1，或者0%到100%。gradientUnit属性和spreadMethod属性类似于线性渐变focus：基本形状矩形rect：x：矩形左上角的x坐标y：矩形左上角的y坐标width：宽度rectangleheight：矩形的高度rx：对于圆角矩形，circlex方向的角对应的椭圆的半径ry：对于圆角矩形，y方向的圆角对应的椭圆的半径circlecx：圆心的x坐标cy：圆心的y坐标r：圆的半径ellipsecx：椭圆中心的x坐标cy：椭圆的y坐标centerrx：椭圆的x轴半径ry：椭圆线的y轴半径线段x1：起点x坐标y1：起点y坐标x2：x坐标终点的y2：点多边形点的y坐标每个点的坐标路径基本相关属性fill//填充（line-wrappedinterval）colorstroke//定义线条、文本或元素轮廓颜色stroke-width//Definealine,textorelementoutline粗细stroke-linecap//butt|圆形|正方形|inheritstroke-dasharray,stroke-dashoffsetstroke-dasharray:绘制虚线时:当一个参数:表示虚线的长度和每条虚线之间的距离当两个或多个参数时:一个表示长度,一个表示spacingstroke-dashoffset：表示虚线路径的起始偏移d路径相关的直线命令：M：移动笔刷M10,10（两个参数）H：画水平线H100（一个参数）V：画垂直lineV100(一个参数)Z:Closed(无参数)上面命令大写表示绝对位置（清坐标），小写表示相对坐标（相对于上一点的坐标）曲线命令：C三次贝塞尔曲线x1y1,x2y2,xy(orcdx1dy1,dx2dy2,dxdy)x1y1,x2y2两个不同的控制点xy终点Sx2y2,xy(orsdx2dy2,dxdy)(S命令可用于像以前的那样创建贝塞尔曲线，但是，如果S命令跟在C命令或另一个S命令之后，它的第一个控制点将是对称点，假定为前一个控制点如果S命令单独使用，前面没有C命令或其他S命令，那么它的两个控制点将被认为是同一个点。）Qx1y1,xy(orqdx1dy1,dxdy)x1y1控制点决定起点和终点的斜率xy终点坐标T二次贝塞尔曲线xy(或tdxdy)和前面一样，快捷命令T将通过之前的控制点并推断出一个新的控制点。这意味着在您的第一个控制点之后，您可以通过仅定义终点来创建相当复杂的曲线。需要注意的是，T指令之前必须有一个Q指令或者另一个T指令才能达到这个效果。如果单独使用T，会认为控制点和终点是同一个点，所以会画出一条直线。A：画圆弧Arxryx-axis-rotationlarge-arc-flagsweep-flagxy：rx，ry：表示圆弧X轴和Y轴的半径，x-axis-rotation：旋转arc(clockwisepositive)(0不旋转)large-arc-flag:Anglesize(0表示小角度圆弧，1表示大角度圆弧)sweep-flag:arcdirection(0表示从头开始逆时针画圆弧点到终点，1表示从起点到终点顺时针画一条圆弧）x,y：圆弧的终点坐标三次贝塞尔曲线C：三次贝塞尔曲线S：二次贝塞尔曲线Q：二次贝塞尔曲线T：弧线命令A:参考文档MDN；应用github-应用示例
