html svg生成环形进度条的实现方法
发布时间：2019-09-23 15:41:36 作者：樊一 
我要评论
我要评论这篇文章主要介绍了html svg生成环形进度条的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：
代码非常简单：
<svg width="150px" height="150px" class="svg">
<circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="471px" />
</svg>
为了便于演示，我们先用css动画控制：
svg {
transform: rotate(-90deg);
}
.progress {
animation: rotate 1500ms linear both;
}
@keyframes rotate {
from {
stroke-dashoffset: 471px;
}
to {
stroke-dashoffset: 0px;
}
}
实现原理
实现原理非常简单，就是应用svg的stroke-dashoffset和stroke-dasharray属性。
stroke-dasharray
官方解释为可控制用来描边的点划线的图案范式，即定义虚线每段长度即虚线间间隔，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。
stroke-dashoffset
标识的是整个路径的偏移值。
通过控制虚线的间隔与偏移值，便可以行程各种各样的线条动画，当然我们还可以通过js控制，如下：
let path = document.querySelector('#path');
// 可获取路径的长度
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了HTML5超炫酷粒子效果的进度条的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2019-08-23- 这篇文章主要介绍了HTML5触摸事件实现移动端简易进度条的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-04
- 本文给大家介绍了HTML5实现自带进度条和滑块滑杆效果，运用progress标签，设置好min和max数值就好，可以用value获取其中的进度值。具体实现代码大家参考下本文2018-04-17
- 这篇文章主要介绍了网页加载进度条，文中解释了属性和应用，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-17
- 这篇文章主要介绍了HTML页面缩小后显示滚动条的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-26
最新评论