一文了解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;
}
