如何在html中为弧绘制SVG路径答案

【问题标题】：How to draw SVG path for arc in html如何在html中为弧绘制SVG路径
【发布时间】：2019-12-01 13:26:23
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript html svg

【解决方案1】：

以下示例包含三 (3) 个 svg 元素：椭圆，椭圆路径基础，椭圆路径顶部。您可以调整椭圆路径的开始/结束角度以获得进度条。

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

【讨论】：