概要总结
1、描边属性概念
2、笔画属性stroke
3、笔画宽度属性stroke-width
4、笔画笔帽属性stroke-linecap
5、虚线笔画属性stroke-dasharray
一、描边属性概念
SVG提供了大量的笔画属性，实现各种各样的描边效果，属性分别有笔画属性stroke、笔画宽度属性stroke-width、笔画笔帽属性stroke-linecap、虚线笔画属性stroke-dasharray。
所有的描边属性都可以应用于任何类型，例如线条、文本和元素的轮廓等等。
二、笔画属性stroke
它定义了一个元素的线条、文本或轮廓的颜色，值是任何合法的颜色值。
<svg width="300" height="80" style="background: #eee">
<g fill="none">
<path stroke="red" d="M 5 20 l 215 0"/>
<path stroke="black" d="M 5 40 l 215 0"/>
<path stroke="blue" d="M 5 60 l 215 0"/>
</g>
</svg>
三、笔画宽度属性stroke-width
它定义了一个元素的线条、文本或轮廓的厚度，值是一个数字。
<svg width="300" height="80" style="background: #eee">
<g fill="none" stroke="black">
<path stroke-width="2" d="M 5 20 l 215 0"/>
<path stroke-width="4" d="M 5 40 l 215 0"/>
<path stroke-width="6" d="M 5 60 l 215 0"/>
</g>
</svg>
四、笔画笔帽属性stroke-linecap
它定义了一个开放路径的不同类型的结束点，值有三个：butt没有线帽，也就是默认属性；round圆形线帽；square方形线帽。
<svg width="300" height="80" style="background: #eee">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M 5 20 l 215 0"/>
<path stroke-linecap="round" d="M 5 40 l 215 0"/>
<path stroke-linecap="square" d="M 5 60 l 215 0"/>
</g>
</svg>
五、虚线笔画属性stroke-dasharray
它用来创建虚线，它的值是一个数字序列，以此定义虚线的线条与空隙的大小。
序列值是个数字，至少要定义两个值，以下是"20,20"和"20,10,5,5,5,10"的效果。
<svg width="300" height="80" style="background: #eee">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M 5 20 l 215 0"/>
<path stroke-dasharray="10,10" d="M 5 40 l 215 0"/>
<path stroke-dasharray="20,10,5,5,5,10" d="M 5 60 l 215 0"/>
</g>
</svg>
六、代码演示
七、代码链接
