The following example has three(3) svg elements: ellipse, ellipsePathBase, ellipsePathTop.(以下示例包含三（3）个svg元素：ellipse，ellipsePathBase，ellipsePathTop。)
You can adjust the start/end angles of the ellipse paths to obtain your progress bar.(您可以调整椭圆路径的开始/结束角度以获得进度条。)
<!DOCTYPE HTML> <html> <head> <title>Ellipse Path</title> </head> <body onload=initEllipseArc()> <center> <svg width=400 height=400> <ellipse cx=200 cy=200 rx=180 ry=80 fill=red stroke="none" /> <path id=ellipsePathBase fill="none" stroke="black" stroke-width=5 /> <path id=ellipsePathTop fill="none" stroke="blue" stroke-width=5 /> </svg> <br> <button onClick="createSegArc(200, 200, 180, 80, -45, -120)" >change segment angle</button> </center> <script> //---onload--- function initEllipseArc() { var rx=180 var ry=80 var cx=200 var cy=200 var d= [ "M",cx,cy, "m",-rx,0, "a",rx,ry, 0,1,0,2*rx, 0, "a",rx,ry, 0,1,0,-2*rx, 0 ] ellipsePathBase.setAttribute("d",d.join(" ")) //--create partial ellipse path segment--- createSegArc(cx, cy, rx, ry, 90, -90) } //---Arc path d format: d = "M startX,startY A rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, endX, endY" function createSegArc(centerX, centerY, radiusX, radiusY, startAngle, endAngle) { function polarToCartesian(centerX, centerY,radiusX, radiusY, angleInDegrees) { var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0; return { x: centerX + (radiusX * Math.cos(angleInRadians)), y: centerY + (radiusY * Math.sin(angleInRadians)) }; } StartPnt = polarToCartesian(centerX, centerY, radiusX, radiusY, startAngle); EndPnt = polarToCartesian(centerX, centerY, radiusX, radiusY, endAngle); ArcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", StartPnt.x, StartPnt.y, "A", radiusX, radiusY, 0, ArcSweep, 0, EndPnt.x, EndPnt.y ].join(" "); ellipsePathTop.setAttribute("d",d) } </script> </body> </html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
