A ゲージメーター 特定の範囲内の値を視覚的に示すツールです。コンピュータでは、 “ディスク容量インジケータ” ゲージメーターを使用して、使用可能な合計容量から使用されているディスク容量を示します。ゲージには、その範囲全体にわたってゾーンまたは領域があり、それぞれ独自の色で区別されています。フロントエンド開発では、 特定の範囲内のデータを表示するためのHTML5タグ. この記事では、 半円形SVGゲージメーター, そしてそれをアニメ化します。このプレビューGIFを見てください。 Firefoxでの最終バージョンの動作: メーターの 範囲は0〜100です, そしてそれは表示されます 3つの等しいゾーン 黄色、青、赤で。必要に応じてゾーンの範囲と数を変更できます. 説明のために、手動で計算し、次の手順でインラインSVG属性/プロパティを使用します。. 私の最後のデモでは、SVGプロパティの計算と挿入にCSSとJavaScriptを使用して、より柔軟にしています。. 1.円を描く SVGで単純な円を描きましょう。 HTML5の新機能 tagを使用すると、HTMLコードにSVGを正しく追加できます。の中 タグを追加します。 SVGの形状はこんな感じです: CSSでは、追加しましょう 幅 そして 高さ ラッパーのプロパティ、両方とも円の直径以上(この例では300ピクセル)。幅と高さも設定する必要があります。 #meter 100%までの要素....