SVG path绘制百分比圆弧，给力啊

亦凉 2021-05-10 11:18 520阅读 0赞

利用SVG的circle可以绘制百分比圆弧，但总觉得有点不够高端，相比起来，我更喜欢利用SVG的path来绘制百分比圆弧，因为其中会利用到绘制圆弧的基本数学知识（我已经把数学还给了老师，从网络上抓取别人的成果，进行了改造），这样就觉得很有装逼范。

\#\#\#一、效果图  
![这里写图片描述][20160525171925279]

\#\#\#二、实现方法  
页面元素构成

是不是看的有点晕，如果你不熟悉SVG的话，先看[svg中path标签的用法][svg_path]，对path的基本属性进行了解。

另外呢，我给path赋予了rate（百分比）、x（moveto的x坐标）、y（moveto的y坐标）、r（圆弧的半径）的属性。

赋值

// 圆弧
    $("path.ring", $p).each(function() { 
    	var $this = $(this);
    
    	YUNM.debug('path.ring' + $this.selector);
    
    	var r = $this.attr("r");
    	var x = $this.attr("x"), rate = $this.attr("rate");
    
    	// 给path 设置属性
    	if (rate < 100) { 
    		var progress = rate / 100;
    
    		// 将path平移到我们需要的坐标位置
    		$this.attr('transform', 'translate(' + x + ',' + x + ')');
    
    		// 计算当前的进度对应的角度值
    		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);
    
    		// 大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
    		var lenghty = window.Number(degrees > 180);
    
    		// path 属性
    		var descriptions = [ 'M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y ];
    
    		$this.attr('d', descriptions.join(' '));
    	}
    });

这段代码就主要根据圆弧的起始点、半径、圆弧的进度来计算圆弧的终点。这段代码中用到的数学知识我肯定是不记得了，网络上其他程序员提供的demo。

\#\#\#三、简单改造后的源码，可直接运行

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>HTML5中的SVG属性实现圆形进度条效果</title>
    </head>
    <body>
    
        
        <svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">   
    	<path id="ring" fill="none" stroke="#fd30ae" />
        </svg>
    	<script> var path = document.getElementById('ring'); var r=100; var progress=0.6; //将path平移到我们需要的坐标位置 ring.setAttribute('transform', 'translate('+r+','+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); //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0 var lenghty = window.Number(degrees > 180); //path 属性 var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y]; // 给path 设置属性 path.setAttribute('d', descriptions.join(' ')); </script>
    </body>
    </html>

这是网络上其他朋友提供的计算方法，我只做了简单的修改，插入到我的项目中。本篇主要用来推广SVG的path绘制百分比圆弧的方法，希望需要的人能够及早得到帮助，感谢！

![20190430093935456.jpg][]

[20160525171925279]: /images/20210506/f57d614fdf7c47a48bd07ad0ffd55a03.png
[svg_path]: http://www.cnblogs.com/netWild/archive/2010/12/07/1898792.html
[20190430093935456.jpg]: /images/20210506/d01a89231bad462da18d13834507de2b.png