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


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页