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

SVG实现圆圈进度效果

1、viewBox

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

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

这里写图片描述
这里写图片描述

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

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

猜你喜欢

转载自blog.csdn.net/Seety_ST/article/details/78363496