は、どのように私はパスを描画しようとした <img src="https://i.stack.imgur.com/Bh8pT.png" alt="what i expected[1]"> を次のようにSVGを使用してHTMLにプログレスバーを作成しようとしていますが、それは働いていないのHTML

にアークのためのSVGパスを描画します。ここに私がしたことがあります。は、どのように私はパスを描画しようとした <img src="https://i.stack.imgur.com/Bh8pT.png" alt="what i expected[1]"> を次のようにSVGを使用してHTMLにプログレスバーを作成しようとしていますが、それは働いていないのHTML

What I could create[2]

私は、第1の画像に表示黄線/暗灰色線と同じ赤線の始点と終点を変更する必要があります。私は進歩バーを曲げるために必要な進歩にも依存します。

私は最後の2日を試していますが、それは私を助けません。私はSVGの新機能です。私は以下のリンクに従っているが、役に立たない。ここ

https://www.w3.org/TR/SVG/images/paths/arcs02.svg私のHTMLコードは、次の例では、3つのSVG要素有する

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

出典

2016-08-09 Sandip Armal Patil

ある：楕円、 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) 
 
{ 
 
\t function polarToCartesian(centerX, centerY,radiusX, radiusY, angleInDegrees) 
 
\t { 
 
\t \t var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
\t \t return { 
 
\t \t x: centerX + (radiusX * Math.cos(angleInRadians)), 
 
\t \t y: centerY + (radiusY * Math.sin(angleInRadians)) 
 
\t \t }; 
 
\t } 
 

 
\t StartPnt = polarToCartesian(centerX, centerY, radiusX, radiusY, startAngle); 
 
\t EndPnt = polarToCartesian(centerX, centerY, radiusX, radiusY, endAngle); 
 
\t ArcSweep = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
\t var d = [ 
 
\t "M", StartPnt.x, StartPnt.y, 
 
\t "A", radiusX, radiusY, 0, ArcSweep, 0, EndPnt.x, EndPnt.y 
 
\t ].join(" "); 
 

 
    ellipsePathTop.setAttribute("d",d) 
 

 

 
} 
 
</script> 
 
</body> 
 
</html>

出典

2016-08-09 17:59:52

は、どのように私はパスを描画しようとした</p> <p><img src="https://i.stack.imgur.com/Bh8pT.png" alt="what i expected[1]"></p> <p>を次のようにSVGを使用してHTMLにプログレスバーを作成しようとしていますが、それは働いていないのHTML

答えて

は、どのように私はパスを描画しようとした</p> <p><img src="https://i.stack.imgur.com/Bh8pT.png" alt="what i expected[1]"></p> <p>を次のようにSVGを使用してHTMLにプログレスバーを作成しようとしていますが、それは働いていないのHTML

答えて

関連する問題