SVG之Basic Shape

这篇主要记录需要死记硬背的几个svg形状标签和属性

Shapes

形状标签	说明
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y">	从坐标(start-x, start-y)到坐标(end-x, end-y)画一条直线
<rect x="left-x" y="top-y" width="width" height="height" rx="5" ry="10"/>	以坐标(left-x, top-y)作为左上角，画一个宽度为width，高度为height的长方形，可使用rx和ry设置横轴和纵轴方向上四个角的弧度（类似border-radius，但似乎没提及如何单独设置某一个角）
<circle cx="center-x" cy="center-y" r="radius"/>	以坐标(center-x, center-y)为圆心，长度radius为半径，画一个圆
<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius"/>	以坐标(center-x, center-y)为圆心，横轴半径为x-radius，纵轴半径为y-radius，画一个椭圆
<polygon points="points-list"/>	根据points-list坐标集，画一个封闭的多边形（参数个数必须为负数，逗号或空格分隔，两两一对，表示x坐标和y坐标。第一个坐标与最后一个坐标不必相同，polygon会自动完成封闭多边形的操作）
<polyline points="points-list"/>	根据points-list坐标集，画一条折现（参数个数必须为双数，逗号或空格分隔，两两一对，表示x坐标和y坐标。）

stroke

属性	属性值及说明
stroke	设置线条颜色(与css中颜色定义方式相同，#fff,rgb,rgba,white...)
stroke-width	设置线条宽度（以线条为中心向两边等量扩展）
stroke-opacity	设置线条透明度
stroke-dasharray	设置虚线的实线和空白的宽度，单数参数表示实线的宽度，双数参数表示空白的宽度（如果属性值个数为单数，会自动将属性值复制一份追加在原属性后面变成双数）
stroke-linecap	设置线条末端的呈现方式：butt(默认，到了指定长度就一刀切),round(圆弧状), square(正方形状，比butt突出来宽度的50%，试着用一下就知道了）
stroke-linejoin	设置线条连接处的呈现方式：miter(默认，延伸到形成一个尖角), round(圆弧状), bevel（大概意思是垂直于法线一刀切，试着用一下就知道了）
stroke-miterlimit	设置线条以miter方式呈现时，最大延伸长度

最后一个参数stroke-miterlimit是和stroke-linejoin="miter"配合使用的。
举例来说，两条线夹角比较小的时候，用stroke-linejoin="miter"方式连接，并且stroke-miterlimit设置成一个比较大的是指时会出现很长的延伸

第一个转角明显要比第三个转角要短。如果两条线的夹角接近无限小，连接处的延伸会接近无限长。为了限制延伸部分的长度，就有了stroke-miterlimit属性，默认值为4，所以上图在没有设置stroke-miterlimit属性时显示如下

fill

属性	属性值及说明
fill	设置填充颜色
fill-opacity	设置填充颜色透明度
fill-rule	设置填充规则：nonzero(默认), evenodd

重点说一下fill-rule属性

书里原话：
The nonzero rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon’s lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name), the point is inside the polygon.
The evenodd rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon’s lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.

反正光看这段我是不怎么理解的。然后就去网上搜，搜到一篇讲得非常清楚的文章，链接放这儿
http://m.blog.csdn.net/article/details?id=53484235
尤其里面这张图

什么是相对于向量而言的从左到右、从右到左，交汇多少次，一目了然。不复制人家的东西了，具体看链接文章。