javascript - 如何在HTML中绘制弧的SVG路径

我正在尝试使用SVG在html中创建进度条，如下所示

我试图画出路径，但是没有用。这是我所做的。

我需要更改与第一张图中显示的黄线/深灰线相同的红线的起点和终点。还取决于进度，我需要弯曲进度条。

我是SVG的新手。我遵循以下链接，但无济于事。

https://www.w3.org/TR/SVG/images/paths/arcs02.svg
这是我的HTML代码

<!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>

最佳答案

以下示例包含三个（3）svg元素：
椭圆，
ellipsePathBase，
ellipsePathTop。
您可以调整椭圆路径的开始/结束角度以获得进度条。

<!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>