Un jauge est un outil qui indique visuellement une valeur dans une plage donnée. Dans les ordinateurs, un «indicateur d'espace disque» utilise un indicateur de jauge pour montrer combien d'espace disque est utilisé par rapport au total disponible. Les jauges ont des zones ou des régions à travers sa gamme, chacune différenciée par sa propre couleur. En développement frontal, nous pouvons utiliser le Balise HTML5 pour afficher les données dans une plage spécifique.
Dans ce post, nous allons faire un jaugeur SVG de forme semi-circulaire, et l'animer. Jetez un oeil à cette preview GIF qui montre comment la version finale fonctionnera dans Firefox :
La plage du compteur est comprise entre 0 et 100 et affiche trois zones égales en jaune, bleu et rouge. Vous pouvez changer la plage et le nombre de zones en fonction de vos besoins.
À des fins d'explication, je vais effectuer des calculs manuels et utiliser les attributs / propriétés SVG en ligne dans les étapes suivantes.
Ma démo finale, cependant, utilise CSS et JavaScript pour le calcul et l'insertion des propriétés SVG afin de le rendre plus flexible.
1. Dessinez un cercle
Dessinons un simple cercle en SVG. HTML5 nouveau
En CSS, ajoutons les propriétés width et height au wrapper, supérieures ou égales au diamètre du cercle (c'est 300px dans notre exemple). Nous devons également définir la largeur et la hauteur de l'élément #meter à 100%.
2. Ajoutez un contour au cercle et supprimez le remplissage
A l'aide des propriétés SVG du stroke et stroke-width, nous ajoutons un contour au cercle et, en utilisant la propriété fill="none", nous supprimons également le remplissage du cercle.
3. couvrir seulement la moitié du cercle
La propriété SVG stroke-dasharray crée un contour en pointillés et prend deux valeurs, la dash length et la gap length .
Pour le contour en demi-cercle, la valeur de la dash length du dash length doit être égale à la demi-circonférence du cercle, de sorte que le trait recouvre la moitié de la circonférence du cercle et la gap length l' gap length doit être égale ou supérieure à la circonférence restante.
Quand il est plus, il sera converti à la circonférence restante par le navigateur, donc nous utiliserons la valeur de la circonférence complète pour la gap length de l' gap length . De cette façon, nous pouvons éviter de calculer la circonférence restante.
Voyons voir les calculs:
où r est le rayon. Pour un rayon de 150, la circonférence est:
Si nous le divisons par 2, nous obtenons 471, 24 pour la demi-circonférence, de sorte que la valeur de la propriété stroke-dasharray pour un contour en demi-cercle dans un cercle de 150 rayons est 471, 943 . Ce demi-cercle sera utilisé pour désigner la zone de faible portée du compteur.
Comme vous pouvez le voir, c'est à l'envers, donc nous allons augmenter le SVG en ajoutant la propriété CSS transform avec la valeur de rotateX(180deg) à la
hideout-lastation.com
Ma démo finale, cependant, utilise CSS et JavaScript pour le calcul et l'insertion des propriétés SVG afin de le rendre plus flexible.
En CSS, ajoutons les propriétés 
3. couvrir seulement la moitié du cercle 
Comme vous pouvez le voir, c'est à l'envers, donc nous allons augmenter le SVG en ajoutant la propriété CSS 
