With SVG's circle you can draw percent arcs, but always feel a little high-end, I prefer to use SVG's path to draw a percentage arc, because it will take advantage of the basic mathematical knowledge of drawing arcs (I have given the math back to the teacher, crawling the results of others from the web, has been modified), so it feels like a very loaded force fan.
One Second, the realization methodPage element composition
<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="Si" y="7" r=" stroke="#fd30ae " D=" m54,7a47,47,0,1,1,11,71 " stroke-width=" 4 " /></svg>If you are not familiar with SVG, look at the use of the path tag in SVG to understand the basic properties of path.
In addition, I gave path the properties of rate (percent), X (moveto x-coordinate), Y (moveto y-coordinate), and r (radius of arc).
Assign value
//Arc$("Path.ring", $p). each ( function() { var$ This= $( This); Yunm.debug (' path.ring '+ $ This. selector);varr = $ This. attr ("R");varx = $ This. attr ("x"), rate = $ This. attr ("Rate");//Set properties for Path if(Rate < -) {varProgress = rate/ -;//translate path to the coordinate position we need$ This. attr (' Transform ',' Translate ('+ x +', '+ x +' ) ');//Calculate the current progress corresponding to the angle value vardegrees = Progress * the;//Calculates the Radian value corresponding to the current angle varrad = degrees * (Math. PI/ the);//Polar coordinates converted to rectangular coordinate varx = (Math. Sin (RAD) * R). toFixed (2);vary =-(Math. cos (RAD) * R). toFixed (2);//greater than 180 degrees when painting a large angle arc, less than 180 degrees of small angle arc, (deg >)? 1:0 varlenghty = window. Number (Degrees > the);//Path property vardescriptions = [' M ',0,-R,' A ', R, R,0, Lenghty,1, X, y]; $ This. attr (' d ', Descriptions.join ("')); }});This code is mainly based on the arc's starting point, radius, arc of the progress of the arc to calculate the end point. I'm sure I don't remember the math in this code, the demos from other programmers on the web.
Third, the simple transformation of the source code, can be directly run<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>The SVG attribute in HTML5 realizes the round progress bar effect</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> varPath = document.getElementById (' Ring ');varR= -;varprogress=0.6;//translate path to the coordinate position we needRing.setattribute (' Transform ',' Translate ('+r+', '+r+' ) ');//Calculate the current progress corresponding to the angle value vardegrees = Progress * the;//Calculates the Radian value corresponding to the current angle varrad = degrees* (Math. PI/ the);//Polar coordinates converted to rectangular coordinate varx = (Math. Sin (RAD) * R). toFixed (2);vary =-(Math. cos (RAD) * R). toFixed (2);//greater than 180 degrees when painting a large angle arc, less than 180 degrees of small angle arc, (deg >)? 1:0 varlenghty = window. Number (Degrees > the);//path Property vardescriptions = [' M ',0,-R,' A ', R, R,0, Lenghty,1, X, y];//Set properties for PathPath.setattribute (' d ', Descriptions.join ("'));</script></body></html>This is the calculation method provided by other friends on the network, I have only made simple changes and inserted into my project. This article is mainly used to promote the SVG path to draw percent arc method, I hope the need for people to get help early, thanks!
SVG path Draw percent arc, give force AH
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
