Technicalarticles

SVG实现环形进度条的原理
作者：赵刘伟 时间：2020-10-26 浏览量：

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：

01-1.gif

代码非常简单：



  <svg width="150px" height="150px" class="svg">    
     <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>    
     <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />
  </svg>



为了便于演示，我们先用css动画控制：



  svg {    
      transform: rotate(-90deg);
  }
  .progress {    
     animation: rotate 1500ms linear both;
  }
  @keyframes rotate {    
    from {        
      stroke-dashoffset: 471px;    
    }    
   to {        
      stroke-dashoffset: 0px;    
   }
  }


实现原理

实现原理非常简单，就是应用svg的stroke-dashoffset和stroke-dasharray属性。
stroke-dasharray
官方解释为可控制用来描边的点划线的图案范式，即定义虚线每段长度即虚线间间隔，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。
stroke-dashoffset
标识的是整个路径的偏移值。通过控制虚线的间隔与偏移值，便可以行程各种各样的线条动画，当然我们还可以通过js控制，如下：


  let path = document.querySelector('#path');  // 可获取路径的长度  let len = path.getTotalLength();  path.style.cssText = `stroke-dasharray:"${number}"`;
返回列表

想和你做个朋友

DO U LIKE?