svg环形进度条

最新推荐文章于 2024-05-30 20:03:01 发布

原创最新推荐文章于 2024-05-30 20:03:01 发布 · 240 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #svg

本文介绍了一个使用SVG实现的环形进度条示例，通过HTML和JavaScript动态更新进度条的填充颜色和显示的百分比数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG环形进度条示例

环形进度条html文件代码示例

<!DOCTYPE html>
<html>
  <header>
  </header>
  <style>
    .text{
      text-align: middle;
      dominant-baseline:middle;
    }
    body{
      text-align: center;
    }
  </style>
  <body>
    <svg xmlns="http://www.w3.org/200/svg" height="700" width="700">
      <!-- 设置底色圆环 -->
      <circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40" stroke-linecap="round"></circle>
      <!-- 设置进度条 -->
      <circle class="progess" transform="rotate(-90,350,350)" cx="350" cy="350" r="300" fill="none" stroke="red" stroke-width="40" stroke-linecap="round" stroke-dasharray="0,10000"></circle>
      <!-- stroke-dasharray 一个表长度一个表间距 -->
      <!-- 设置文本 -->
      <text class="text" x="200" y="350" font-size="200" fill="red">0</text>
    </svg>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

index.js代码示例

// 获取进度条circle对象
var progessDom = document.querySelector(".progess");
// 获取文本长度
var textDom = document.querySelector(".text");

function rotateCircle (persent) {
    // 获取svg圆形环的总长，通过获取半径长度算出总长
    var circleLength = Math.floor(2 * Math.PI * parseFloat(progessDom.getAttribute("r")));
    // 按照百分比 算出进度条环的长度
    var value = persent*circleLength/100;
    // 红色 255，0，0
    // 蓝色 0，191，255
    var red = 255 + parseInt((0-255)/100*persent);
    var green = 0 + parseInt((191-0)/100*persent);
    var blue = 0 + parseInt((255-0)/100*persent);
    // 设置stroke-dasharray的颜色
    progessDom.setAttribute("stroke-dasharray", value + ",10000");
    progessDom.setAttribute("stroke", `rgb(${red}, ${green}, ${blue})`)
    //设置文本内容和颜色
    textDom.innerHTML = persent + '%';
    textDom.setAttribute("fill", `rgb(${red}, ${green}, ${blue})`);
}
// 300毫秒进度+1
let num = 0;
setInterval(()=>{
  num++;
  if(num>100) {
    num = 0;
  }
  rotateCircle(num)
}, 30);

效果展示

在这里插入图片描述