svg实现简单的圆形进度条


            //进度条渐变色
            
                
                    
                    
                
            
        //进度条渐变
        //外层圆
        
        //外层圆
        //内容圆
           
        //内层圆      
     

svg实现圆形进度条总结

stroke-dasharray:设置实线和虚线的宽度

stroke-dashoffset:实线虚线绘制的起点距路径开始的距离

stroke-dasharray  我们可以设置成圆的周长也就是  2πr

stroke-dashoffset  我们可以设置成进度条空白部分的周长 2πr*(1- percent)

是不是很简单!

你可能感兴趣的:(svg实现简单的圆形进度条)