使用SVG實現圓環loading進度效果

2021-07-30 12:50:37 字數 851 閱讀 8238

當我們想實現這樣乙個loading效果，有這麼幾種選擇，第一種是使用canvas，第二種是借助css3的transform屬性。這兩種方法有乙個問題，在webkit核心的瀏覽器上存在毛邊。那麼如果只相容ie9+的瀏覽器，可以考慮使用svg

svg的實現效果非常簡單

實現這個效果的關鍵因素在於stroke-dasharray="0 1069"第乙個引數代表藍色進度條的長度，第二個引數代表灰色背景的長度。這裡兩個引數的和必須是1069，也就是圓的周長

如果我們想拖動下面的進度條自動更新進度，只需要通過js改變這個屬性值就可以。js**如下所示

if(window.addevenetlistener))


}
css**如下所示

circle
stroke-dasharray在svg中描邊是代表虛線，第乙個引數是虛線的寬度，第二個引數是虛線之間的間距。預設stroke-dasharray的起始位置在右側，而不是上方，因此，我們需要使用transform逆時針旋轉90°, 這就是第二個circle元素上面transform=」matrix(0,-1,1,0,0,440)」的由來。(ios 手機上，transform逆時針旋轉90°只會改變圖形外觀，但是其座標起始位置還是右側。因此，更改起始座標可能還需要通過外部容器旋轉控制。)

使用svg畫圓環

專案中需要乙個圓形進度條，本著能省則省的原則，先去elementui上看了下，傻眼了，不一樣，ui直接否定了這個辦法。這個沒啥難點，cx,cy,r分別表示圓心 x,y 和半徑r,stroke width是圓的邊，stroke表示邊的顏色，fill表示整個圓的填充顏色。其實就是兩個同心圓，裡面的圓的邊...

SVG做圓環進度

我們要實現的效果 是不是有點感覺。哈哈 動態效果是用css3來實現的，至於進度則是用js控制stroke dasharray屬性實現的。如下 首先看下html結構 1143 1566加油開始99 濾鏡效果 對於svg不熟悉的，先看下svg基本教程 接下來看下css樣式 zh rt main zh r...

svg 實現圓環倒計時效果

一 先上效果圖，專案中需要圓環根據中間的倒計時相應遞減 二 接下來看svg 實現 1 css 部分 svgcontainer svgcontainer svg circle 2 html 部分 10 3 js 部分 獲得第二個圓的引用 var circle document.getelementsb...