学习SVG系列（3）：SVG Stroke属性
SVG stroke 属性
1、stroke
2、stroke-width
3、stroke-linecap
4、stroke-dasharray
5、stroke-opacity
6、stroke-linejoin
Stroke 属性
边框色，属性定义一条线，文本或元素轮廓颜色
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
stroke-width属性
stroke-width属性定义了一条线，文本或元素轮廓厚度
SVG代码：
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
Stroke-linecap属性
Stroke-linecap属性定义线段端点的风格，这个属性可以使用butt/square/round三个值
SVG代码：
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
stroke-dasharray属性
该属性用于创建虚线：
SVG代码：
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"
/>
</g>
</svg>
stroke-opacity属性
该属性设置边框的透明度，值的范围从0到1
SVG代码：
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-opacity="1" stroke-width="10" fill="transparent" stroke-linejoin="miter" />
<polyline points="40 100 80 60 120 100" stroke="black" stroke-opacity="0.5" stroke-width="10" fill="transparent" stroke-linejoin="round" />
<polyline points="40 140 80 100 120 140" stroke="black" stroke-opacity="0.1" stroke-width="10" fill="transparent" stroke-linejoin="bevel" />
</svg>
stroke-join属性
该属性设置线条拐弯处的连接方式
SVG代码：
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="10" fill="transparent" stroke-linejoin="miter" />
<polyline points="40 100 80 60 120 100" stroke="black" stroke-width="10" fill="transparent" stroke-linejoin="round" />
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="10" fill="transparent" stroke-linejoin="bevel" />
</svg>
