之前在项目中遇到一个圆形进度条的需求，需要实时更新进度，脑子里瞬间跳出css、svg、canvas3的方案。三种方案我个人比较喜欢svg，使用简单，代码量小，也方便实时控制。具体效果如下：代码很简单：为了演示方便，我们先用css动画控制：svg{transform:rotate(-90deg);}.progress{animation:rotate1500mslinearboth;}@keyframesrotate{from{stroke-dashoffset:471px;}to{中风-dashoffset:0px;}}实现原理实现原理很简单，就是套用svg的stroke-dashoffset和stroke-dasharray属性。stroke-dasharray官方解释为可以控制笔画所使用的点划线的模式范式，即定义每段虚线的长度，即虚线之间的间隔，并分隔带逗号或空格的数字，并指定破折号和间隔长度。如果提供了奇数个值，则值的序列重复成为偶数个值。stroke-dashoffset标识整个路径的偏移值。通过控制虚线的间隔和偏移值，可以进行各种线条动画。当然我们也可以通过js来控制，如下：letpath=document.querySelector('#path');//可以得到路径长度letlen=path.getTotalLength();path.style.cssText=`stroke-dasharray:"${number}"`;
