如何使用svg生成環形進度條

本篇內容主要講解“如何使用svg生成環形進度條”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用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}"`;

到此，相信大家對“如何使用svg生成環形進度條”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！