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}"`;

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