# 1. 线段

line 元素,使用 x1, y1, x2, y2 属性指定线段的起止点坐标。有如下特性:

特性 说明
stroke-width 笔画宽度,坐标网格线位于笔画的正中间,可以使用 cssshape-rendering 值来控制反锯齿特性
stroke 笔画颜色
stroke-opacity 线条的不透明度
stroke-dasharray 虚线,由一系列数字组成,数字个数为偶数(负责会自动重复一遍使其为偶数),表示线长-间隙-线长-间隙...

# 2. 矩形

rect元素,使用x,y,width,height表示一个矩形

特性 说明
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度,边框是骑在矩形边界上的,一半在矩形外,一半在矩形内
rx/ry 圆角矩形,最大值为矩形宽/高的一半,如果只指定了一个,则认为两个都为相同的值

# 3. 圆和椭圆

circle 元素表示圆,由 cx,cy,r 属性界定 ellipse 元素表示椭圆,由 cx,cy,rx,ry 界定

特性 说明
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度,边框是骑在圆的边界上的,一半在圆/椭圆外,一半在圆/椭圆内

# 4. 多边形

polygon 元素指定一个多边形,由 points 属性指定的一系列坐标点界定,会自动封闭

特性 说明
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度
fill-rule 填充规则,如果多边形的边有交叉时,需要指定,可以取 mozero(默认)和 evenodd 两个值。

fill-rule 值为 nonzero 时的原理:判断一个点是在多边形内部还是外部时,从这个点画一条到无穷远的射线,然后数这个线和多边形的边有多少次交叉。如果交叉的边线是从右往左画,则总数加 1,如果是从左往右则总数减 1. 如果最后总数为 0 则认为改点在图形外部,否则在内部。

fill-rule 值为 evenodd 时只数射线与多边形边的交叉次数,如果为奇数则认为在多边形内部,否则认为在多边形外部。

# 5. 折线

polyline 元素表示一个折线,使用 points 属性指定一系列点,不自动封闭图形。

# 6. 特性总结

特性 说明
stroke 笔画颜色
stroke-width 笔画宽度
stroke-opacity 笔画不透明度
stroke-dasharray 虚线笔画
stroke-linecap 笔画头的形状 butt(默认),round,square
stroke-linejoin 图形棱角,有miter(默认),roundbevel三个取值
stroke-miterlimit 相交处显示宽度与线宽的最大比例,默认为4
fill 填充颜色 默认black
fill-opacity 填充不透明度
fill-rule 填充规则
最后更新: 2021/7/5 下午5:48:01