如何在html中為弧繪制SVG路徑
[英]How to draw SVG path for arc in html
問題描述
我正在嘗試使用 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>
1 個解決方案
解決方案1
3 2016-08-09 17:59:52
以下示例包含三 (3) 個 svg 元素：ellipse、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>
SVG繪制路徑並用橢圓弧填充
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.