SVG path繪製百分比圓弧，給力啊
阿新 • • 發佈：2018-11-23
原文出處：https://blog.csdn.net/qing_gee/article/details/51500220/
利用SVG的circle可以繪製百分比圓弧，但總覺得有點不夠高階，相比起來，我更喜歡利用SVG的path來繪製百分比圓弧，因為其中會利用到繪製圓弧的基本數學知識（我已經把數學還給了老師，從網路上抓取別人的成果，進行了改造），這樣就覺得很有裝逼範。
一、效果圖
二、實現方法
頁面元素構成
<svg height="108" version="1.1" width="108" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;"> <path class="ring" rate="${deal.attrs.rate}" fill="none" x="54" y="7" r="47" stroke="#fd30ae" d="M54,7A47,47,0,1,1,11,71" stroke-width="4" /> </svg>
是不是看的有點暈，如果你不熟悉SVG的話，先看svg中path標籤的用法，對path的基本屬性進行了解。
另外呢，我給path賦予了rate（百分比）、x（moveto的x座標）、y（moveto的y座標）、r（圓弧的半徑）的屬性。
賦值
// 圓弧 $("path.ring", $p).each(function() { var $this = $(this); YUNM.debug('path.ring' + $this.selector); var r = $this.attr("r"); var x = $this.attr("x"), rate = $this.attr("rate"); // 給path 設定屬性 if (rate < 100) { var progress = rate / 100; // 將path平移到我們需要的座標位置 $this.attr('transform', 'translate(' + x + ',' + x + ')'); // 計算當前的進度對應的角度值 var degrees = progress * 360; // 計算當前角度對應的弧度值 var rad = degrees * (Math.PI / 180); // 極座標轉換成直角座標 var x = (Math.sin(rad) * r).toFixed(2); var y = -(Math.cos(rad) * r).toFixed(2); // 大於180度時候畫大角度弧，小於180度的畫小角度弧，(deg > 180) ? 1 : 0 var lenghty = window.Number(degrees > 180); // path 屬性 var descriptions = [ 'M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y ]; $this.attr('d', descriptions.join(' ')); } });
這段程式碼就主要根據圓弧的起始點、半徑、圓弧的進度來計算圓弧的終點。這段程式碼中用到的數學知識我肯定是不記得了，網路上其他程式設計師提供的demo。
三、簡單改造後的原始碼，可直接執行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5中的SVG屬性實現圓形進度條效果</title> </head> <body> <svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="ring" fill="none" stroke="#fd30ae" /> </svg> <script> var path = document.getElementById('ring'); var r=100; var progress=0.6; //將path平移到我們需要的座標位置 ring.setAttribute('transform', 'translate('+r+','+r+')'); // 計算當前的進度對應的角度值 var degrees = progress * 360; // 計算當前角度對應的弧度值 var rad = degrees* (Math.PI / 180); //極座標轉換成直角座標 var x = (Math.sin(rad) * r).toFixed(2); var y = -(Math.cos(rad) * r).toFixed(2); //大於180度時候畫大角度弧，小於180度的畫小角度弧，(deg > 180) ? 1 : 0 var lenghty = window.Number(degrees > 180); //path 屬性 var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y]; // 給path 設定屬性 path.setAttribute('d', descriptions.join(' ')); </script> </body> </html>
這是網路上其他朋友提供的計算方法，我只做了簡單的修改，插入到我的專案中。本篇主要用來推廣SVG的path繪製百分比圓弧的方法，希望需要的人能夠及早得到幫助，感謝！