整理一个svg绘制环形进度条的demo，需要的同学拿去用即可
定义svg绘图区域
在html页面的任何位置，添加svg绘图面板。定义svg绘图区域大小
绘制一个圆形
cx 和 cy 属性定义圆点的 x 和 y 坐标，单位省略为px，如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)，r 属性定义圆的半径，stroke定义描边的颜色，stroke-width定义描边宽度，fill定义填充颜色
定义一个path路径区域
使用path指令绘制扇形
首先查看一下常用的path指令,获取svg中的path，指定半径为100，进度为50，我们绘制一个扇形
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
var path = document.getElementById('ring'); var r=100; var progress=50; //将path平移到我们需要的坐标位置 ring.setAttribute('transform', 'translate('+r+','+r+')'); // 计算当前的进度对应的角度值 var degrees = progress * (360/100); // 计算当前角度对应的弧度值 var rad = degrees* (Math.PI / 180); //极坐标转换成直角坐标 var x = (Math.sin(rad) * r).toFixed(2); var y = -(Math.cos(rad) * r).toFixed(2); //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0 var lenghty = window.Number(degrees > 180); //path 属性 var descriptions = ['M', 0, 0, 'v', -r, 'A', r, r, 0, lenghty, 1, x, y, 'z']; // 给path 设置属性 path.setAttribute('d', descriptions.join(' ')); 在扇形上覆盖一个圆形
封装绘图函数
path参数为绘图面板id，progress为进度值0-100，r为半径
function draw(path,progress,r) { path.setAttribute('transform', 'translate('+r+','+r+')'); var degrees = progress * (360/100); 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); var descriptions = ['M', 0, 0, 'v', -r, 'A', r, r, 0, lenghty, 1, x, y, 'z']; path.setAttribute('d', descriptions.join(' '));}