How to draw SVG path for arc in html
Question
I am trying to create progress bar in html using SVG like following
I tried to draw path but it's not working. Here is what I done.
I need to change start and end point of red line same as yellow line/Dark gray line which show in first image. also depends on progress I need to bend progress bar.
I am very new to SVG. I follow below links but not helpful.
https://www.w3.org/TR/SVG/images/paths/arcs02.svg Here is my html code
<!DOCTYPE html> <html> <body> <svg height="140" width="500"> <ellipse cx="200" cy="80" rx="150" ry="30" style="fill:none;stroke:purple;stroke-width:6" /> <ellipse cx="200" cy="80" rx="150" ry="30" style="fill:none;stroke:green;stroke-width:6" /> <path id = "progress-bar" d="M200 ,50 a150,30 0 1,0 150,30" fill="none" stroke="red" stroke-width="6"/> </svg> </body> </html>
1 answers
solution1
3 2016-08-09 17:59:52
The following example has three(3) svg elements: 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.