学习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>