Stroke
svg 提供一些属性来控制绘制描边的方式
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
stroke
stroke:表示描边颜色
stroke-width
stroke-width:表示描边的粗细
<svg>
<g fill="none">
<path stroke="red" d="M5 20 l500 0" />
<path stroke="blue" d="M5 40 l500 0" />
<path stroke="black" d="M5 60 l500 0" />
</g>
</svg>
<svg>
<g fill="none" stroke="red">
<path stroke-width="4" d="M5 20 l500 0" />
<path stroke-width="8" d="M5 40 l500 0" />
<path stroke-width="12" d="M5 60 l500 0" />
</g>
</svg>
stroke-linecap
stroke-linecap:控制边框终点的形状
属性有三个值
- butt:直边结束线段
- square:会稍微超出实际路径的范围,超出的大小由stroke-width控制
- round:边框的终点是圆角,圆角的半径也是由stroke-width控制的
<svg>
<g fill="none" stroke="green" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l500 0" />
<path stroke-linecap="round" d="M5 40 l500 0" />
<path stroke-linecap="square" d="M5 60 l500 0" />
</g>
</svg>
stroke-linejoin
stroke-linejoin:描边转角的表现方式
- miter:默认值,表示用方形画笔在连接处形成尖角
- round:用圆角连接,实现平滑效果
- bevel:连接处会形成一个斜接
<svg width="160" height="280">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none"
stroke-linejoin="miter" />
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none"
stroke-linejoin="round" />
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none"
stroke-linejoin="bevel" />
</svg>
stroke-dasharray
stroke-dasharray:表示虚线描边
- 属性是一组用逗号分割的数字组成的数列
<svg>
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="290" d="M0 0 l290 0" />
<path stroke-dasharray="5,5" d="M5 20 l290 0" />
<path stroke-dasharray="10,10" d="M5 40 l290 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l290 0" />
</g>
</svg>
stroke-dashoffset
stroke-dashoffset:表示虚线的起始偏移