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

0
0
0
1. 云栖社区>
2. 博客>
3. 正文

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

### 二、实现方法

``````<svg height="108" version="1.1" width="108" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative; left: -0.5px;">
<path class="ring" rate="\${deal.attrs.rate}" fill="none" x="54" y="7" r="47" stroke="#fd30ae" d="M54,7A47,47,0,1,1,11,71" stroke-width="4" />
</svg>``````

``````// 圆弧
\$("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(' '));
}
});``````

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

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>HTML5中的SVG属性实现圆形进度条效果</title>
<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>``````

+ 关注