HTML5 中SVG属性path实现动态绘制圆形进度条效果

最新推荐文章于 2025-06-15 13:38:14 发布

feiyue1010

最新推荐文章于 2025-06-15 13:38:14 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端 svg html 动态圆环 path绘制圆环动态加载圆环文章标签： html5 svg svg path 动态圆环绘制

本文链接：https://blog.youkuaiyun.com/weixin_42794365/article/details/86544245

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

html

3 篇文章

订阅专栏

svg

2 篇文章

订阅专栏

本文介绍如何使用SVG和path属性创建动态进度环，通过定时器实现动态加载效果，包括HTML和JavaScript代码示例。

使用svg 绘制动态进度环，这里使用svg 中的path实现效果，和定时器制作动态环加载

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 中SVG属性path实现动态绘制圆形进度条效果</title>
</head>
<body>

window.onload = function() {
// 参数说明
/*
** pre 绘制的环的进行度
*/
var pre = 80
draw(pre)
function drawCrice(deg) {
var path = document.getElementById('ring');
var r=100;
var progress=deg/100;

//将path平移到我们需要的坐标位置
ring.setAttribute('transform', 'translate('+2*r+','+2*r+')');

// 计算当前的进度对应的角度值
var degrees = progress * 360;

// 计算当前角度对应的弧度值
var rad = degrees* (Math.PI / 180);

//极坐标转换成直角坐标
var x = (Math.sin(rad) * r).toFixed(2);
var y = -(Math.cos(rad) * r).toFixed(2);
var lenghty = window.Number(degrees > 180);

//path 属性
if (x == '-0.00') {
x = '-0.01'
}
var descriptions = ['M', 0, -r, 'A', r, r, 0,lenghty, 1, x, y];

// 给path 设置属性
path.setAttribute('d', descriptions.join(' '));
}
// 画圆
function draw(pre){
var text = document.getElementById('conText')
text.innerHTML = ''
for(var i=0;i<=pre;i++){
(function(){
var j=i;

setTimeout(function(){
drawCrice(j);
text.innerHTML = '测试'+ j + '%';
},j*20)
})()
}

}
}