SVG基本形状绘制总结

线段：<line x1=" " y1=" " x2=" " y2=" " style=" "/>

矩形：<rect x=" " y=" " width=" " height=" " style=" "/>

圆角矩形：<rect x=" " y=" " rx=" " ry=" " style=" "/>

圆形：<circle cx=" " cy=" " r=" " style=" "/>

椭圆形：<ellipse cx=" " cy=" " rx=" " ry=" " style=" " />

多边形：<polygon points=" " style=" "/>

折线：<polyline points=" " style=" "/> //注意需把fill设成none

SVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：



图1 nonezero（默认属性）



图2 evenodd属性

笔画特性：

属性	值
stoke	笔画颜色，默认为none
stroke-width	笔画宽度，默认为1
stroke-opacity	笔画透明度，默认为1.0（完全不透明），值范围：0.0~1.0
stroke-dasharray	用一系列数字指定虚线和间隙的长度，如：stroke-dasharray:5,10,5,20
stroke-linecap	线头尾的形状：butt（默认）、round、square
stroke-linejoin	图形的棱角或一系列连线的形状：miter（尖的，默认值）、round（圆的）、bevel（平的）
stroke-miterlimit	相交处显示宽度与线宽的最大比例，默认为4