Een geanimeerde SVG-snelheidsmeter maken

EEN meter is een hulpmiddel dat visueel een waarde binnen een bepaald bereik aangeeft. Op computers, a “schijfruimteaanduiding” maakt gebruik van een meter om aan te geven hoeveel schijfruimte er wordt gebruikt uit het totale beschikbare aantal. Meters hebben zones of regio's over het hele bereik, elk gedifferentieerd door zijn eigen kleur. In de front-end ontwikkeling kunnen we de HTML5-tag om gegevens binnen een specifiek bereik weer te geven.

In dit bericht maken we een SVG-meter met een halfronde vorm, en animeer het. Bekijk deze preview GIF die wordt weergegeven hoe de definitieve versie in Firefox zal werken:

De meter is bereik is 0-100, en het wordt weergegeven drie gelijke zones in geel, blauw en rood. U kunt het bereik en het aantal zones naar wens wijzigen.

Voor uitlegdoeleinden voer ik handmatige berekeningen uit en gebruik ik inline SVG-kenmerken / eigenschappen in de volgende stappen.

Mijn laatste demo gebruikt echter CSS en JavaScript voor het berekenen en invoegen van SVG-eigenschappen om het flexibeler te maken.

1. Teken een cirkel

Laten we een eenvoudige cirkel tekenen in SVG. HTML5 is nieuw tag stelt ons in staat om SVG rechtstreeks in de HTML-code in te voeren. Binnen in de tag, we voegen het toe SVG-vorm als volgt:

Laten we in CSS toevoegen breedte en hoogte eigenschappen van de wrapper, beide groter dan of gelijk aan de diameter van de cirkel (in ons voorbeeld is dit 300 px). We moeten ook de breedte en hoogte instellen van de #meter element tot 100%.

 #wrapper width: 400px; hoogte: 400 px;  #meter width: 100%; hoogte: 100%; 

2. Voeg een omtrek toe aan de cirkel en verwijder de vulling

Met de hulp van de beroerte en streekbreedte SVG-eigenschappen we voegen een omtrek toe aan de cirkel en gebruiken de vullen = "none" eigenschap verwijderen we ook de vulling van de cirkel.

3. bedek slechts de helft van de cirkel

De stroke-dasharray SVG-eigenschap maakt een stippellijn en neemt twee waarden, streeplengte en spleet lengte.

Voor de halfronde omtrek, de streeplengte waarde moet gelijk zijn aan de halve omtrek van de cirkel, zodat het streepje de helft van de omtrek van de cirkel bedekt, en de spleet lengte waarde moet gelijk zijn aan of groter zijn dan de resterende omtrek.

Wanneer het meer is, wordt het door de browser omgezet in de resterende omtrek. Daarom gebruiken we de volledige omtrekwaarde voor de spleet lengte. Op deze manier kunnen we voorkomen dat de resterende omtrek wordt berekend.

Laten we de berekeningen zien:

$\mathrm{omtrek}=2Ã\; ??\; â\; ??\; âÂ\; ??\; Â\; ??\pi \times r$

waar r is de straal. Voor een straal van 150 is de omtrek:

$\begin{array}{}\mathrm{omtrek}=2Ã\; ??\; â\; ??\; âÂ\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{omtrek}=\mathrm{942,48}\end{array}$

Als we het delen door 2, krijgen we 471.24 voor de halve omtrek, dus de waarde van de stroke-dasharray eigenschap voor een halve cirkel omtrek in een straal van 150 radius is 471, 943. Deze halve cirkel wordt gebruikt om de laagbereikzone van de meter aan te duiden.

Zoals u kunt zien, staat het ondersteboven, dus laten we de SVG opklappen door de transformeren CSS-eigenschap met de waarde van rotateX (180 graden) naar de HTML-element.

 #meter transform: rotateX (180deg); 

4. Voeg de andere zones toe

De middelste zone (blauw) moet het ⅔ deel van de halve cirkel bedekken, en ⅔ van 471 is 314. Dus laten we nog een cirkel toevoegen aan onze SVG door de stroke-dasharray eigendom opnieuw, maar nu met de waarde van 314, 943.

  < /circle>  

De laatste zone (rood) moet het laatste ⅓ deel van de halve cirkel beslaan, en ⅓ van 471 is 157, dus we zullen deze waarde toevoegen aan de stroke-dasharray eigendom van de derde cirkel.

5. Voeg de meterschaal toe

Laten we een grijze omtrek aan de meter toevoegen om deze er beter uit te laten zien. De streeplengte van de omtrekcirkel moet gelijk zijn aan de halve omtrek. We plaatsen het vóór alle andere kringen in de code, zodat het zal zijn eerst weergegeven door de browser, en daarom zal zijn weergegeven onder de regiocirkels op het scherm.

De streekbreedte het bezit moet een klein beetje groter zijn dan dat van de andere cirkels, om het uiterlijk van een echt overzicht te geven.

     < /circle>      

Outline Ends

Omdat de omtrek niet de uiteinden van de halve cirkel bedekt, voegen we ook 2 lijnen van ongeveer 2 px toe aan de uiteinden door een nieuwe cirkel toe te voegen met een streeplengte van 2px en a spleet lengte van de halve omtrek minus 2 px. Daarom is de waarde van de stroke-dasharray eigendom van deze cirkel is 2, 469.

Masker

Laten we nu nog een cirkel toevoegen na de zones met laag, gemiddeld en hoog bereik. De nieuwe cirkel zal functioneren als een masker om de onnodige zonegebieden te verbergen wanneer de meter wordt gebruikt.

De eigenschappen ervan zijn dezelfde als die van de omtrekcirkel en de streekkleur zal ook grijs zijn. Het formaat van het masker wordt later aangepast met Javascript om de zones eronder te onthullen als reactie op een invoerschuif.

De gecombineerde code tot nu toe is zoals hieronder.

Als we een gebied onder het masker willen onthullen, moeten we de grootte van het masker verkleinen streeplengte. Bijvoorbeeld wanneer de waarde van de stroke-dasharray eigenschap van de maskercirkel is 157, 943, de bogen zullen in de volgende staat staan:

Dus alles wat we nu moeten doen is het aanpassen van de stroke-dasharray van het masker met JavaScript voor animatie. Maar voordat we dat doen, zoals ik al eerder zei, gebruikte ik CSS en JavaScript voor het berekenen en toevoegen van de meeste SVG-eigenschappen voor mijn definitieve demo..

Hieronder vindt u de HTML-, CSS- en JavaScript-code die leidt tot hetzelfde resultaat als hierboven.

HTML

Ik heb een naaldafbeelding toegevoegd (gauge-needle.svg), een bereikschuifregelaar (ingang # slider) naar de gebruikersinvoer en een label (label # LBL) om de schuifregelaarwaarde in het bereik van 0-100 weer te geven.

    0 
 

CSS

De onderstaande CSS-code voegt stijlregels toe aan de SVG, omdat SVG-shapes op dezelfde manier kunnen worden gestileerd als HTML-elementen. Als je meer wilt lezen over het stylen van SVG met CSS, bekijk dan dit bericht. Raadpleeg dit bericht voor het stylen van de schuifregelaar.

 #wrapper position: relative; marge: automatisch;  #meter width: 100%; hoogte: 100%; transformeren: rotateX (180 graden);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; slagbreedte: 65;  .bereik slagbreedte: 60;  #slider, #lbl position: absolute;  #slider cursor: pointer; links: 0; marge: automatisch; rechts: 0; boven: 58%; breedte: 94%;  #lbl background-colour: # 4B4C51; grensradius: 2px; kleur wit; font-family: 'koerier nieuw'; lettergrootte: 15pt; lettertype: vet; opvulling: 4px 4px 2px 4px; rechts: -48px; top: 57%;  #meter_needle height: 40%; links: 0; marge: automatisch; positie: absoluut; rechts: 0; top 10%; transformatie-oorsprong: midden onderaan; / * oriëntatie fix * / transform: roteer (270 graden); 

JavaScript

In de JavaScript-code berekenen we eerst de afmetingen van de wrapper en alle bogen en stellen deze in, waarna we de toepasselijke bogen toevoegen stroke-dasharray waarden voor de cirkels. Hierna binden we een aangepaste gebeurtenis aan de bereikschuifregelaar om de animatie uit te voeren.

 / * Stel de straal in voor alle cirkels * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; voor (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

De aangepaste range_change_event () Functie

Het gedrag van de meter wordt uitgevoerd door de range_change_event () aangepaste functie die verantwoordelijk is voor de aanpassing van de maskergrootte en de animatie van de naald.

Het neemt de schuifregelaarwaarde (gebruikersinvoer) die tussen 0-100 is, converteert naar de halve omtreksequivalent (meter_value) met een waarde tussen 471-0 (471 is de halve omtrek voor straal 150) en stelt die in meter_value als de streeplengte van het masker stroke-dasharray eigendom.

De range_change_event () aangepaste functie roteert ook de naald na het converteren van de gebruikersinvoer (binnen het bereik van 0-100) naar het graadequivalent van 0-180.

270 ° wordt toegevoegd aan de rotatie van de naald in de bovenstaande code omdat de afbeelding die ik heb gebruikt een rechtopstaande naald is en ik deze in eerste instantie 270 ° moest draaien om deze vlak naar links te laten liggen.

Uiteindelijk heb ik de range_change_event () functie naar de bereikschuifregelaar, zodat de meter kan worden gebruikt.

Bekijk de demonstratie of bekijk de broncode op onze Github-repository.