个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 SVG 在 html 中创建进度条，如下所示
![what i expected[1]](/image/Bh8pT.png)
我尝试绘制路径，但不起作用。这是我所做的。
![What I could create[2]](/image/h7WsD.png)
我需要更改红线的起点和终点，与第一张图像中显示的黄线/深灰色线相同。还取决于我需要弯曲进度条的进度。
我对 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 元素:椭圆，椭圆路径基准，椭圆路径顶部。您可以调整椭圆路径的开始/结束 Angular 以获得进度条。
<!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>关于javascript - 如何在html中绘制圆弧的SVG路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38856296/
25
4
0
我是一名优秀的程序员,十分优秀！