五分钟学会各种环形进度条

最新推荐文章于 2024-09-16 20:08:29 发布

蚂蚁二娘

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量646

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/web2022050901/article/details/128251799

版权

本文通过SVG详细介绍如何创建圆环、矩形和三角形进度条。重点讲解stroke-dasharray和stroke-dashoffset属性的使用，以及不同形状进度条的周长计算方法。通过实例代码演示，帮助读者轻松掌握进度条的实现技巧。

摘要由CSDN通过智能技术生成

本文将会通过svg实现圆形进度条和矩形进度条以及三角形进度条，先放效果图

圆环进度条

首先我们需要两个画两个圆，一个是底色圆，一个是进度圆。

<svg width="200" height="200"><circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" /><path fill="none" d="M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50" stroke="#50D4AB" stroke-width="10" />
</svg>

现在就画好了两个圆，绘制进度圆的重点就是d属性值 ，M代表起点，A代表画椭圆弧，一次最多只能画半圆，所以要分两次，下面是具体画圆路径的参数解释

命令	参数	-参数解释
A	rx, ry x-axis-rotation, large-arc-flag, sweepflag x, y	从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为X轴和Y轴的半径。x-axis-rotation为x轴旋转度数。large-arc-flag代表优弧还是劣弧（0表示劣弧，1表示优弧）。sweep-flag为弧线方向 0为顺时针 1为逆时针
M	x,y	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制