svg制作圆圈百分比数据-进度条

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

榴莲不好吃

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

阅读量6.1k

点赞数 1

分类专栏：其它文章标签： svg 数据百分比 svg圆弧进度条

本文链接：https://blog.csdn.net/sllailcp/article/details/53084697

版权

其它专栏收录该内容

21 篇文章 0 订阅

订阅专栏

突然接到需求，说需要做一个好评率百分比的效果，要有进度条的效果，还要是圆形的，博主也是对svg会一点点，在网上找了圆弧的计算方法，就写了这么个效果，适应了公司的需求，本文有不足之处，希望大家多多提提意见。。

转载请注明出处：http://blog.csdn.NET/sllailcp/article

这块是用jquery结合svg，用js生成的svg代码。

1、首先封装一个函数用来创建svg标签（普通的创建节点对svg是没用的）

function createTag(tag,tagAttr){
	var oTag=document.createElementNS(svgNS,tag);
	for(var attr in tagAttr){
		oTag.setAttribute(attr,tagAttr[attr]);
	};
	return oTag;
};

2、再封装一个画圆弧的路径公式----这段计算是在网上找的

function drawArcByRadiusDeg(startX, startY, r, deg, clockwise) {
	var cw = typeof clockwise !== 'undefined' ? clockwise : 1;
	var x = startX - r + r*Math.cos(deg*Math.PI/180);
	var y = startY + (1===cw ? 1 : -1)*r*Math.sin(deg*Math.PI/180);
	var bigOrSmall = deg>180 ? 1 : 0;
	return "M " + startX +" "+ startY + " A "+ r +" " + r + " 0 " + bigOrSmall + " " +cw+ " " + x + " " + y
}

3、再生成svg---传入的参数是一个百分比的数据，例如95%，就是0.95

function drawPath(data){
	var x=102,y=52,r = 50,clockwise=1;//x,y圆心位置   r圆弧的半径   clockwise顺时针
	var Percentage=data*359.9999;
	var circle1=createTag('path',{'d':drawArcByRadiusDeg(x, y, r, 359.99, clockwise),'stroke':"#ccc",'fill-opacity':"0",'stroke-width':"4"});
	var circle2=createTag('path',{'d':drawArcByRadiusDeg(x, y, r, Percentage, clockwise),'stroke':"red",'fill-opacity':"0",'stroke-width':"4"});
	var text1=createTag('text',{'x':x-50,'y':y-10,'fill':"red",'font-size':"20",'text-anchor':"middle"});
	var text2=createTag('text',{'x':x-50,'y':y+20,'fill':"#333",'font-size':"20",'text-anchor':"middle"});
	$(text1).html(data*100+'%');
	$(text2).html('好评率');
	
	$(oSvg).append(circle1);
	$(oSvg).append(circle2);
	$(oSvg).append(text1);
	$(oSvg).append(text2);
}

4、调用函数，用来生成svg添加到页面中

var svgNS = "http://www.w3.org/2000/svg";
var oSvg=createTag('svg',{"width":"100%","height":"100%",'xmlns':svgNS});
$('.svgs').append(oSvg);

//调用
drawPath(0.653);

完整的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{background:#000;}
.svgs{width:105px;height:105px;background:#fff;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
</head>

<body>
  <div class="svgs">
</div>
</body>
</html>
<script type="text/javascript">
//协议
var svgNS = "http://www.w3.org/2000/svg";   
//封装方法创建标签
function createTag(tag,tagAttr){
	var oTag=document.createElementNS(svgNS,tag);
	for(var attr in tagAttr){
		oTag.setAttribute(attr,tagAttr[attr]);
	};
	return oTag;
};
//画圆弧的路径
function drawArcByRadiusDeg(startX, startY, r, deg, clockwise) {
	var cw = typeof clockwise !== 'undefined' ? clockwise : 1;
	var x = startX - r + r*Math.cos(deg*Math.PI/180);
	var y = startY + (1===cw ? 1 : -1)*r*Math.sin(deg*Math.PI/180);
	var bigOrSmall = deg>180 ? 1 : 0;
	return "M " + startX +" "+ startY + " A "+ r +" " + r + " 0 " + bigOrSmall + " " +cw+ " " + x + " " + y
}
//画图
function drawPath(data){
	var x=102,y=52,r = 50,clockwise=1;//x,y圆心位置   r圆弧的半径   clockwise顺时针
	var Percentage=data*359.9999;
	var circle1=createTag('path',{'d':drawArcByRadiusDeg(x, y, r, 359.99, clockwise),'stroke':"#ccc",'fill-opacity':"0",'stroke-width':"4"});
	var circle2=createTag('path',{'d':drawArcByRadiusDeg(x, y, r, Percentage, clockwise),'stroke':"red",'fill-opacity':"0",'stroke-width':"4"});
	var text1=createTag('text',{'x':x-50,'y':y-10,'fill':"red",'font-size':"20",'text-anchor':"middle"});
	var text2=createTag('text',{'x':x-50,'y':y+20,'fill':"#333",'font-size':"20",'text-anchor':"middle"});
	$(text1).html(data*100+'%');
	$(text2).html('好评率');
	
	$(oSvg).append(circle1);
	$(oSvg).append(circle2);
	$(oSvg).append(text1);
	$(oSvg).append(text2);
}

//创建svg
var oSvg=createTag('svg',{"width":"100%","height":"100%",'xmlns':svgNS});
$('.svgs').append(oSvg);

//调用
drawPath(0.653);
</script>

效果图如下：

榴莲不好吃

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
svg制作圆圈百分比数据-进度条

突然接到需求，说需要做一个好评率百分比的效果，要有进度条的效果，还要是圆形的，博主也是对svg会一点点，在网上找了圆弧的计算方法，就写了这么个效果，适应了公司的需求，本文有不足之处，希望大家多多提提意见。。转载请注明出处：http://blog.csdn.NET/sllailcp/article这块是用jquery结合svg，用js生成的svg代码。1、首先封装一个函数用来...
复制链接

扫一扫