svg圆形进度条

css3实现的圆形进度条较复杂，代码量较多，本文稍微讲解下如何使用svg实现圆形进度条。

• svg实现一个圆用元素：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
svg>

以上代码绘制一个半径为50的圆。

• 圆形进度条主要需要两个属性stroke-dasharray和stroke-dashoffset。
  • stroke-dasharray用于绘制形状轮廓的虚线和间隙。

	<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />

  
  <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />

  
  <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />

  
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="4 1 2 3" />

  
  <line
    x1="0"
    y1="11"
    x2="30"
    y2="11"
    stroke="black"
    stroke-dasharray="0 4 0" />
svg>

以上是`stroke-dasharray`的使用， 效果如下图所示：

• stroke-dashoffset 定义关联的破折号阵列的呈现上的偏移。

<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  
  <line
    x1="0"
    y1="5"
    x2="30"
    y2="5"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="3" />

  
  <line
    x1="0"
    y1="7"
    x2="30"
    y2="7"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="-3" />

  
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="1" />

  
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
svg>

以上是stroke-dashoffset的使用，效果如下图所示：

• 了解了svg圆形进度条需使用的属性后，实现：

<svg viewBox="0 0 100 100">
      <circle cx='50' cy="50" r="20"
        stroke-linecap="round"
        stroke-dasharray="125.6"
        stroke-dashoffset="40"
        stroke-width="4"
        stroke="#d7b386"
      />
svg>

效果如图所示：

• 需要关注两点：
  1. stroke-dasharray=Math.PI*r*2(r为半径）即直接画一个圆周。
  2. stroke-dashoffset=减去的弧度即定义偏移量。

转载CSS3实现的圆形进度条：https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html