CODEWITHSUNDEEP
javascripthtmlsvg
Sandip Armal Patil
Sandip Armal Patil

Reputation: 5905

How to draw SVG path for arc in html

I am trying to create progress bar in html using SVG like following

what i expected[1]

I tried to draw path but it's not working. Here is what I done.

What I could create[2]

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>

Upvotes: 2

Views: 833

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

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>

Upvotes: 3

Related Questions