static progress circle
SVG屬性解説
stroke-dasharray: 實線長度, 空白長度
svg(viewbox="-50 -50 100 100")
line(x1=-50,y1=0,x2=100,y2=0)
svg
border: 1px solid #000
width: 300px
height: 300px
line
stroke: black
//stroke-dasharray也可以寫在html的line屬性裡面
stroke-dasharray: 6,15
Display
dash-strokearray也可以指定%數,100%等於整條線,所以
line
stroke: black
dash-strokearray: 100% 0%
//這樣可以得到一條黑線
line
stroke: black
dash-strokearray: 0% 100%
//這樣可以得到一條看不見的線
stroke-dashoffset: 偏移開始的位置
line裡面偏移數字等於x的減項
svg(viewbox="-50 -50 100 100")
line(x1=-50,y1=0,x2=100,y2=0)
svg
border: 1px solid #000
width: 300px
height: 300px
line
stroke: black
stroke-dasharray: 6,15
//向左縮了5
//等於x1-5,x2-5
stroke-dashoffset: 5
Display
進階:圓形版
stroke-dashedarray
圓形的stroke-dashedarray 100%不是整條圓周,整條圓周的%算法是
//等於圓周長*100%
svg半徑(r)*2*3.14*100%
所以
svg(viewbox="-50 -50 100 100")
circle(cx=0,cy=0,r=40)
svg
border: 1px solid #000
width: 300px
circle
fill: none
stroke: black
stroke-dasharray: calc(40* 3.14 * 2 * 100%)
//100%加不加都沒差,反正圓周總長度=圓周長
可以得到一個圓框
svg
border: 1px solid #000
width: 300px
circle
fill: none
stroke: black
stroke-dasharray: 0% calc(40* 3.14 * 2 * 100%)
則可以得到一個透明圓框
circle: stroke-dashoffset
圓形預設由正右方往下畫出來的,所以要往上偏移25%的長度
//往上偏移25%的長度
svg半徑(r)*2*3.14*25%
動態圓形百分比
注意事項
- 圓形從正右邊開始往下畫,不是從正上方開始往下,所以要用stroke-dashoffset偏移適當距離
- 半徑×6.28×指定%數=實線長度,其餘部分為虛線長度
- 動畫起始値為實線0,虛線長等於圓周長
svg(viewbox="-50 -50 100 100")
circle(cx=0,cy=0,r=20)
text(x=-11,y=4) 80%
svg
border: 1px solid #000
width: 300px
circle
fill: none
stroke: #90a955
animation: apc 5s infinite
text
font-size: 10px
fill: #90a955
@keyframes apc
0%
//動畫裡面不知為何不能用calc
//圓周長20*2*3.14=125.6
//80%圓周長125.6*0.8=100.48
//20%圓周長125.6*0.2=25.12
//往上偏移25%:125.6*25%=31.4
stroke-dasharray: 0,125.6
stroke-dashoffset: 31.4
100%
stroke-dasharray: 100.48,25.12
stroke-dashoffset: 31.4
Display