使用svg画圆环

效果图

 使用组件把这个给封装，代码：需要传入参数为类名，中间的数值，以及圆环百分比。里面的数字是根据位置调整上去的哦。

那么这个svg中的circle中的cx和cy就是坐标位置，stroke-width就是边界宽度，stroke就是颜色。

function circle(className, value, percent) {
  let content = `
  

  
${value}
  
  `;

/* .useNum {
        position: absolute;
        top: 0;
        left: -50px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        height: 400px;
        line-height: 400px;
      } */

  $(`.${className}`).append(content);
  let circle = document.querySelector(`.${className}path`),
    len = 2 * Math.PI * circle.getAttribute("r");
  //   console.log(circle, range, len);
  let perimeter = circle.getTotalLength(); //圆环的周长
  //   console.log(perimeter);
  // 在圆环上设置属性
  circle.style.strokeDasharray = len;
  circle.style.strokeDashoffset = len - len * percent;
  console.log(circle.style.strokeDashoffset)
  circle.style.transition = "stroke-dashoffset .3s ease-in-out";
}

使用：

参考：

SVG画环形进度条_潘潘WWMM的博客-CSDN博客_svg环形进度条

笔记：SVG 环形动画（进度条）原理 - 胡椒的小站