用svg实现一个环形进度条
Posted fly叶落丶知秋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用svg实现一个环形进度条相关的知识,希望对你有一定的参考价值。
svg实现环形进度条需要用到的知识:
1、会使用path的d属性画一个圆环
//用svg的path元素的A命令画圆 <path d=" M cx cy m 0 -r a r r 0 1 0 0 2r a r r 0 1 0 0 -2r" > ></path> //cx cy起点 r 半径
2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset
话不多说,直接上代码
<div style="width: 200px;height: 200px;"> <svg viewBox="0 0 100 100"> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#e5e9f2" stroke-width="5"> ></path> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#20a0ff" stroke-linecap="round" class="my-svg-path" transform="rotate(90,50,50)" stroke-width="5"> </path> </svg> </div>
.my-svg-path{ stroke-dasharray: 252.2px, 252.2px; stroke-dashoffset: 22px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s; transform: rotateZ(90deg); transform-origin: 50% 50%; }
效果:
以上是关于用svg实现一个环形进度条的主要内容,如果未能解决你的问题,请参考以下文章