整顿一个svg绘制环形进度条的demo,须要的同砚拿去用即可
定义svg画图地区
在html页面的任何位置,增加svg画图面板。定义svg画图地区大小
<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
绘制一个圆形
cx 和 cy 属性定义圆点的 x 和 y 坐标,单元省略为px,假如省略 cx 和 cy,圆的中间会被设置为 (0, 0),r 属性定义圆的半径,stroke定义描边的色彩,stroke-width定义描边宽度,fill定义添补色彩
<circle cx="250" cy="250" r="40" stroke="black" stroke-width="2" fill="red"/>
定义一个path途径地区
<path id="ring" fill="#76B13C" />
运用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(' '));
在扇形上掩盖一个圆形
<circle cx="100" cy="100" r="82" fill="#FFF" />
封装画图函数
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(' '));
}