一文了解svg之stroke属性

属性

stroke-width

SVG具有stroke-width定义笔触宽度的CSS属性。

<svg width="500" height="120">

    <circle cx="50" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 1px;" />

    <circle cx="150" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 3px;" />

    <circle cx="250" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 6px;" />

    <circle cx="350" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 12px;" />

</svg>

效果如图：

stroke-linecap(描边线帽)

strokelinecap属性定义不同类型的开放路径的终结。

<svg >

	<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-linejoin

该CSS属性stroke-linejoin, 定义如何在一个形状两条线之间的连接被渲染。该CSS属性stroke-linejoin可以采用三个值中的一个。值：

miter
round
bevel

<svg width="500" height="120">

	<path d="M20,100 l20,-50 l20,50" style="stroke: #FF0000;   fill:none;stroke-width:16px;stroke-linejoin: miter;"></path>

	<text x="22" y="20">miter</text> 

	<path d="M120,100 l20,-50 l20,50" style="stroke: #FF0000;   fill:none;stroke-width:16px;stroke-linejoin: round;"></path>

	<text x="122" y="20">round</text> 

	<path d="M220,100 l20,-50 l20,50" style="stroke: #FF0000;   fill:none;stroke-width:16px;stroke-linejoin: bevel;"></path>

	<text x="222" y="20">bevel</text>

</svg>

效果如图：

stroke-miterlimit

style样式中stroke-miterlimit属性与stroke-linejoin一起使用。

如果stroke-linejoin设置为斜接，则stroke-miterlimit可以使用来限制两条线相交的点（线角（角）延伸）之间的距离。

<svg width="500" height="120">

	<path d="M20,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter; stroke-miterlimit: 1.0;"></path>

	<text x="29" y="20">1.0</text> 

	<path d="M120,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter;stroke-miterlimit: 2.0;"></path>

	<text x="129" y="20">2.0</text> 

	<path d="M220,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter;stroke-miterlimit: 4.0;"></path>

	<text x="229" y="20">4.0</text>

</svg>

效果如图：

stroke-dasharray

SVG CSS属性stroke-dasharray用于绘制以虚线呈现的SVG形状的笔触。之所以称为“破折号数组”，是因为您提供了一个数字数组作为值。这些值定义破折号和空格的长度。

<svg width="500" height="120">

	<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" />

</svg>

定义了一个带有虚线的笔划，虚线部分的宽度为10像素，虚线之间的间隔为5像素。

效果如图：

带有不同破折号和空格宽度的：

<svg width="500" height="120">

	<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5 5 5"></line>

	<line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5 5 10"></line>

</svg>

第一行以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，然后是5像素的另一间距。然后重复该模式。

第二行以虚线宽度10开始，然后是5像素的间距，然后是5像素的虚线，最后是10像素的间距。

效果如图：

stroke-dashoffset

offset：偏移的意思。这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。

需要注意的是，不管偏移的方向是哪边，要记得dasharray是循环的，也就是虚线-间隔-虚线-间隔。

<svg width="500" height="120">

	<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" />

	<line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" stroke-dashoffset="3"/>

	<line x1="20" y1="60" x2="120" y2="60" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" stroke-dashoffset="-3"/>

</svg>

效果如图：

stroke-opacity

SVG CSS属性stroke-opacity用于定义SVG形状轮廓的不透明度。该值越接近1，则笔划越不透明。默认stroke-opacity值为1，表示笔划完全不透明。

<svg width="500" height="120">

	<text x="22" y="40">Text Behind Shape</text>

	<path d="M20,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.3;"></path>

	<path d="M80,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.7;"></path>

	<path d="M140,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 1;"></path>

</svg>

效果如图：

实例效果

线段从无到有，由短变长

第一步，设置stroke-dasharray虚线长度等于当前svg的宽度，间隔大于或者等于svg宽度

<svg >

　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>

</svg>

这时可视区域内只能看到一段虚线，如图：

第二步，设置stroke左移300单位（stroke-dashoffset:300），也就是刚好隐藏了虚线，可视区域内变成了320单位的间隔。

<svg >

　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320" stroke-dashoffset="300"/>

</svg>

第三步，当鼠标移入的时候，使offset由300变成0，就实现了动图中的效果

svg:hover #line{

	stroke-dashoffset: 0;

}

#line{

	transition: all 2s;

}

圆形环绕一圈效果

鼠标hover的时候，外层线段绕自身一圈。这个动画的实现原理跟上面一样，设置stroke-dasharray虚线长度等于当前圆的周长，间隔大于或者等于圆的周长。

第一步，画圆，圆的半径50。

<svg  width="200" height="200" viewBox="0 0 200 200">

   <circle id="circle" cx="100" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green" />

</svg>

第二步，设置圆的stroke-dasharray和stroke-dashoffset，为圆的周长。

#circle{

	 transition: all 2s;

	 stroke-dasharray:314,314;

	 stroke-dashoffset:314;

 }

第三步，hover的时候，设置stroke-dashoffset为0，注意圆的stroke起始位置为右侧中间

svg:hover #circle{

    stroke-dashoffset:0;

}