如何在html中为弧绘制SVG路径
[英]How to draw SVG path for arc in html
问题描述
I am trying to create progress bar in html using SVG like following
我正在尝试使用 SVG 在 html 中创建进度条，如下所示
I tried to draw path but it's not working.我试图绘制路径，但它不起作用。 Here is what I done.这是我所做的。
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.我对 SVG 很陌生。 I follow below links but not helpful.我遵循以下链接，但没有帮助。
https://www.w3.org/TR/SVG/images/paths/arcs02.svg Here is my html code 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>
1 个解决方案
解决方案1
3 2016-08-09 17:59:52
The following example has three(3) svg elements: ellipse, ellipsePathBase, ellipsePathTop.以下示例包含三 (3) 个 svg 元素：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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.