SVG 与环形进度条

SVG path 实现环形进度条

利用 SVG path 实现环形进度条

注意点

1. stroke-dasharray="3 1" 表示一个长度为3，间隔为1的虚线，并且该虚线在svg宽度内是无限循环的

2. stroke-dashoffset 表示虚线偏移的位置，正数向左偏移，负数向右偏移（与我们正常的认知是相反的）

3. 我们可以设置dasharray虚线的长度等于svg的宽度，间隔大于或者等于svg的宽度，当鼠标移入的时候，设置offset为0，就可以实现线段由短到长的效果

4. 两个参数或者多个参数时：一个表示长度，一个表示间距

   • 如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
   • 如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环

5. 图示

关键代码

// html部分
<svg width="200" height="200">
    <line x1="0" y1="0" x2="200" y2="0" 
    stroke-width="20" 
    stroke="black" 
    stroke-dasharray="200 210"
    stroke-width="20" stroke-dashoffset="200" />
</svg>
// css部分
line {
   transition: all 2s;
}
svg:hover line {
  stroke-dashoffset: 0;
}

掌握了上面的关键点，我们就可以稍微变化一下图形，做出其他好看的画线效果

还有这样的

PS:第一次发文章，希望大家多多支持(#^.^#)