SVG基本形状绘制总结

线段:

矩形:

圆角矩形:

圆形:

椭圆形:

多边形:

折线: //注意需把fill设成none


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


图1 nonezero(默认属性)

SVG基本形状绘制总结_第1张图片

图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


你可能感兴趣的:(前端开发——D3,前端开发基础)