溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2022-03-01 09:51:57 來源:億速云 閱讀:211 作者:iii 欄目:開發技術

本篇內容主要講解“如何使用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生成環形進度條”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

svg
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女