html svg转化成环状进度条的完成方式

日期：2021-02-22 类型：科技新闻 

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

以前在新项目中遇到1个环状进度条的要求，规定能即时升级进度，脑海中一瞬间便蹦出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(⑼0deg);
}
.progress {
    animation: rotate 1500ms linear both;
}
@keyframes rotate {
    from {
        stroke-dashoffset: 471px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

完成基本原理

完成基本原理十分简易，便是运用svg的stroke-dashoffset和stroke-dasharray特性。

stroke-dasharray

官方解释为可控性制用来描边的点划线的图案设计范式，即界定虚线每段长度即虚线间间距，数与数之间用逗号或空白分隔，特定短划线和缺口的长度。假如出示了单数个值，则这个值的数列反复1次，从而变为偶数个值。

stroke-dashoffset

标志的是全部相对路径的偏位值。

根据操纵虚线的间距与偏位值，即可以行程各种各样各种各样的线条动漫，自然大家还能够根据js操纵，以下：

let path = document.querySelector('#path');
// 可获得相对路径的长度
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：html5 挪动端视頻video的android适配(除去播发控制、 返回下一篇：没有了