SVG初步了解,制作圆圈进度效果

SVG实现圆圈进度效果

1、viewBox

2、 基于stroke-dasharray和stroke-dashoffset圆形进度条

stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数
stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到)

SVG初步了解,制作圆圈进度效果
SVG初步了解,制作圆圈进度效果

具体可参考一下链接来实现需要的效果

http://www.runoob.com/svg/svg-stroke.html