Question

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

what i expected[1]

我试图绘制路径，但它不起作用。这就是我所做的。

What I could create[2]

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

我最近两天都在努力，但这对我没有帮助。我是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>

Answer 1

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

＆＃13;

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

＆＃13;

如何在html中绘制弧的SVG路径

1 个答案: