雖然CSS的功能非常強大，但仍然有些限制，有些視覺效果無法輕易用CSS呈現，此時我們可以使用SVG或HTML 5 Canvas的方式處理。
SVG的優點除了是向量圖縮放後不失真以外，另外就是各大流覽器皆有支持。
有關SVG的特性這裡就不再多做說明，本次重點是利用SVG 的stroke-dasharray屬性做出可以依比率顯示的圓餅圖，成果如下：
首先來瞧瞧stroke-dasharray，SVG提供了一個屬性stroke-dasharray，
透過它我們可以做出不同的虛線效果，如下圖，線段長度都是500。
分析後，
我們可以發現stroke-dasharray的屬性規則如下：
我們可以發現stroke-dasharray的屬性規則如下：
stroke-dasharray=＂實線長度，間距長度＂，然後依如此規則畫出虛線。
也就是說，如果我們讓實線長度＋間距長度＝線段長度的話，就可以做出比率圖！
依此類推，當然圓餅圖也能算出比例啦！
使用<circle>並將stroke-dasharray設為＂比率*圓周,(1-比率)*圓周＂，便能畫出各種比率的圓餅圖。
如下圖，半徑為50，圓周為2r約為314，依照計算可得各種比率。
搭配stroke-width的控制，也可以做出實心圓的效果喔！
html碼：
<svg width="200" height="120">
<circle cx="55" cy="55" r="50" stroke="rgb(10,200,255)" stroke-width="10" fill="none" stroke-dasharray="251.2,62.8">
</circle>
</svg>
沒有留言:
張貼留言