最近在做一个h5相关的半圆进度条组件需求时开始学习svg。SVG是一种使用XML来描述二维图形和绘图程序的语言。SVG指的是可缩放矢量图形（ScalableVectorGraphics）。中学的坐标系有点不一样。也可以说svg的坐标系是在x轴上翻转第一象限得到的。y轴右边的x为正值，x轴下方的y为正值。svg中svg值的默认单位是px，单位可写可不写。svgviewportsize每次创建新的SVG元素时，您也会创建一个新的SVG视口。视口的大小等于您为SVG元素设置的宽度和高度。在大多数浏览器中，svg的默认尺寸是长300px，宽150px。在实际应用中，建议指定svg的宽高值。SVGcanvas画布是无限的，这意味着你可以在画布上绘制无限的内容，但是当你绘制的内容超过svg窗口的大小时有时你看不到，但是canvas的内容是存在的，就像css中的overflow:hidden属性只是挡住了可见区域的内容。让我们看一个简单的例子。我们画了一个圆，但是并不是所有的圆都显示在svg窗口中，所以这是因为圆心默认在坐标系的(0,0)位置。当我们设置溢出时：可见；到svg，显示完整的圆。设置圆心在svg窗口中显示ellipse>LinePolylinePolygonPathSVGStrokeRelatedSVG提供了广泛的笔触属性。strokestroke-widthstroke-linecapstroke-dasharraystroke-dashoffset这些属性都是很常用的，尤其是stroke-dasharray和stroke-dashoffset的组合我们可以实现很多生动的进度效果。stroke属性定义线条、文本或元素轮廓颜色：stroke-width属性定义线条、文本或元素轮廓粗细：stroke-linecap属性strokelinecap属性定义不同类型的开放路径结尾：stroke-dasharray属性strokedasharray属性用于创建虚线。当stroke-dasharray为参数时：其实就是表示虚线的长度和每条虚线之间的距离。当有两个或多个参数时：一个代表长度，一个代表距离stroke-dashoffset属性该属性是相对于起点偏移为正时，相当于向左移动x个长度单位，当为负数时，相当于向右移动x个长度单位。
