私は以下の画像を持っています。 AngularJSの入力値に基づいて、画像を部分的に表示したい。入力値が0の場合は、黒いマスクを表示するだけです。値が50の場合、左側に画像の半分を、右側に半分の背景を表示することができます。したがって、基本的に画像の可視部分は入力値に基づいている必要があります。部分的に円形の進行領域に画像を表示
私は、https://github.com/crisbeto/angular-svg-round-progressbarとhttps://github.com/mathewbyrne/angular-progress-arcのようないくつかの円形の進行状況バーといくつかのCSSを試しましたが、正しく動作しませんでした。私はこれを手伝ってくれますか？
あなたは、SVG要素で画像をオーバーレイ弧を作成し、JavaScriptを介して、その値を設定することができます。
<svg>
<path d="Mpoint1 Lpoint2 AcircleRadius 0 1 0 point3 Z" stroke="white" stroke-width="4" fill="black"/>
</svg>
あなたは、円の中心点の座標での頂点の座標と
point2を
point1を交換する必要があります：SVG要素は、このようになります円circleRadius円のx半径とy半径（これは円の場合と同じですが、あなたの場合は同じです）point3あなたが弧を終了させる点の座標を指定します（これはあなたの写真の右下にある点です）。次に、単純なCSSを使用して、このSVG要素を画像の上に正確に配置することができます。その後、あなたはJavaScriptで計算を実行することができますし、簡単にSVGパスの詳細については正しい
にSVG要素にd属性を設定し、確認してください。SVG Paths
を実施例を参照するには、JavaScriptの機能を入力値に基づいて自動的に右円弧を作成します。チェックthis JSFiddle
私はこれを試しました。http://plnkr.co/edit/IV3JANaAePO9eU32yhAw?p=preview。しかし、正確な方法で調整してください。あなたはそれを見てみましょうか？ – Rajeshwar
私はあなたのコードをコピーし、それが動作するように更新し、いくつかのコメントを追加しました。あなたはここにそれを見つけることができます：[JSFiddle]（https://jsfiddle.net/Pandaqi/gLomh1qn/） – Pandaqi
もし私が値 '80,40'を '80,60'に変更すると、測位もやや変化します。固定することができますので、位置決めは変更されず、可視部分のみが変更されます。 – Rajeshwar