本文是根据《SVG精髓》一书进行的简单总结。本文中的demo均由本书提供，目的是方便使用时快速参考。1.坐标系视口（viewport）：文档使用的画布区域，表示SVG可见区域的大小，通常可以使用视口宽高分别为4cm和5cm（画布区域），viewBox左上角(0,0)与视口重合，宽度为64个单位（每个1/16cm），高度为80个单位（每个1/16cm）。矩形rect的坐标是相对于viewBox定位的（如果没有设置viewBox，默认坐标系是viewport）demo1preserveAspectRatio：可以指定缩放图片相对于viewport的对齐方式，是否要适合边缘或切割它。该属性的模型为：preserveAspectRatio="alignment[meet|slice]"alignment：指定坐标轴和位置，由一个x对齐和一个y对齐（min,mid,max）组成。默认为xMidYMid。y对齐xMinxMidxMaxyMinxMinYmin视口左边缘，上边缘对齐xMidYmin视口水平居中，上边缘对齐xMaxYmin视口右边缘，上边缘对齐yMidxMinYmid视口左边缘，垂直居中xMidYmid视口水平居中，垂直居中xMaxYmid视口右边缘，垂直居中yMaxxMinYmax视口leftedge,bottomedgealignxMidYmaxviewporthorizo??ntalcenter,bottomedgealignxMaxYmaxviewportrightedge,bottomedgealign：缩小图像以适应可用空间。slice：裁剪不适合视口的图像部分。在上面的示例中，viewport和viewBox的宽度和高度是按比例缩放的。如果比例不同，可能会发生溢出demo22。基本形状SVG中的基本形状形状描述从起点（start-x,start-y)to(end-x,end-y)demo用左上角处(left-x,top-y)，宽高demo画一个指定半径radius的圆，圆心位于(center-x,center-y)demo画一个椭圆，x方向的半径为x-radius，y方向的半径为y-radius，圆心位于(center-x,center-y)画一个闭合图形，轮廓由points-list指定，由一系列x/y坐标对组成。这些值只能使用用户坐标，不能加上长度单位。demo绘制一系列相连的折线段，折线点由points-list指定，由一系列x/y坐标对组成。这些值只能使用用户坐标，不能加上长度单位。demostroke属性的属性值为strokestrokecolor，默认为nonedemostroke-widthstrokewidth，可以通过用户坐标指定，也可以指定单位。笔划宽度相对于坐标网格线居中。默认值为1，demostroke-opacity是0.0到1.0之间的数字。0.0是完全透明的，1.0是完全不透明的（默认值）demostroke-dasharray是一系列指定破折号和间隙长度的数字。这些数字只能使用用户坐标，默认值为nonedemostroke-linecap线条头尾的形状，值为butt（默认值），圆形或方形demostroke-linejoin图形或状态的角一系列连接的，取值为miter（Pointed，默认值），round或bevel（flat）demostroke-miterlimit交点处显示宽度与线宽的最大比例，默认值为4demofill属性值fillfill颜色，默认值为blackfill-opacity从0.0到1.0的数字。0.0是完全透明，1.0是完全不透明（默认值）fill-rule属性值为非零（默认值）或evenodd。该属性决定了判断一个点是否在图中的方法。仅当边缘交叉或内部有“孔”时才有效。这里只介绍本书的两章，是理解和学习SVG的基础。下面我们一起来学习SVG中常用的元素标签和坐标系变换。
