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

利用SVG的circle可以绘制百分比圆弧，但总觉得有点不够高端，相比起来，我更喜欢利用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>

是不是看的有点晕，如果你不熟悉SVG的话，先看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 : 0var 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 : 0var 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绘制百分比圆弧的方法，希望需要的人能够及早得到帮助，感谢！

SVG path绘制百分比圆弧，给力啊相关推荐

svg path绘制心形_SVG 菜鸟的 Recharts 自定义图表实战
原文作者:IMWeb团队.未经同意,禁止转载. Recharts 是一款图表处理的类库,利用 React 的特性,重新定义了图表的配置和组合方式,大大地提高了图表自定义样式的灵活度.本文记录了使用 R ...
SVG图形绘制入门第一弹
IT入门的路超级漫长--任何时候都发现有完全没听过的东西,比如说下方--原来认为svg就是图片,想着也是跟Ps一样画出来的,现在知道了竟然是用代码写的--,这条路我不知道啥时候才能进步到幼儿园的级别! ...
SwiftUI学习笔记[path绘制]
前言绘制的底层是强大的,我们所用的各端语言只是在现代UI追求的步伐中和用户喜好的交互中求同存异,抽取封装出自成个性风格的UI控件,当然面对万亿级别的客户各个平台的UI库出也不可能满足所有的客户需求, ...
使用 Vue SVG 快速绘制曲线图（带动画）
图表当接到类似以上需求时,你的第一想法是不是跟我一样,使用 Canvas 来绘制,啥都不说就开始撸代码.如果你是用 Vue 之类的 MVVM 框架,那意味着你得提供一个结点供 Canvas 着陆,同 ...
css svg做动图,用svg动态绘制图形
以此前对svg的了解,就是通过rect/circle/line--等绘制规则图形,或者利用path路径来绘制更复杂的图形.但是这种绘制是,当我们写好svg的xml文件嵌入html代码,页面载入的时候, ...
基于svg开发绘制地铁图
中国地铁图中国地铁图,基于svg开发,支持PC.移动端多种浏览器.覆盖北上广多个城市. 线上开源地址 https://github.com/StavinLi/the-subway-of-china ...
SVG动态绘制不规则图形
作者简介 wuyue 蚂蚁金服·数据体验技术团队在浏览器中,任意的二维平面图形均可以通过path路径的形式描述.然后底层api 直接静态绘制出来.但是如果想动态的绘制路径,浏览器是没有直接支持方式的 ...
QT绘制百分比条形图。
QT绘制百分比条形图项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介创建简单的百分比条形图. 百分比条形图将数据集中显示为每个类别中所有数据集的百分比. 创建百分比 ...
SVG PATH d参数的 ace
SVG PATH 的d参数较多,也比较复杂. Moveto Lineto Curveto Arcto ClosePath 这里只打算记录下 Arcto 参数.(https://developer.mo ...

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

SVG path绘制百分比圆弧，给力啊相关推荐

最新文章

热门文章