So erstellen Sie einen animierten SVG-Tachometer

EIN Messgerät ist ein Werkzeug, das visuell einen Wert innerhalb eines bestimmten Bereichs anzeigt. In Computern, a “Speicherplatzanzeige” verwendet ein Messgerät, um anzuzeigen, wie viel Speicherplatz von der verfügbaren Gesamtmenge verwendet wird. Messgeräte haben Zonen oder Regionen im gesamten Bereich, die sich jeweils durch ihre eigene Farbe unterscheiden. In der Frontend-Entwicklung können wir die HTML5-Tag, um Daten in einem bestimmten Bereich anzuzeigen.

In diesem Beitrag machen wir eine SVG-Messgerät mit halbkreisförmiger Form, und animiere es. Schauen Sie sich diese Vorschau-GIF an, die zeigt wie die finale Version in Firefox funktionieren wird:

Das Messgerät Bereich ist 0-100, und es wird angezeigt drei gleiche Zonen in gelb, blau und rot. Sie können den Bereich und die Anzahl der Zonen nach Ihren Bedürfnissen ändern.

Zur Erklärung führe ich manuelle Berechnungen durch und verwende in den folgenden Schritten Inline-SVG-Attribute / -Eigenschaften.

In meiner letzten Demo werden jedoch CSS und JavaScript zum Berechnen und Einfügen von SVG-Eigenschaften verwendet, um sie flexibler zu machen.

1. Zeichne einen Kreis

Zeichnen wir einen einfachen Kreis in SVG. HTML5 ist neu Mit diesem Tag können wir SVG-Dateien direkt in den HTML-Code einfügen. In der tag, fügen wir die SVG-Form wie folgt:

Fügen wir in CSS hinzu Breite und Höhe Eigenschaften der Hülle, beide größer oder gleich dem Durchmesser des Kreises (in unserem Beispiel 300px). Wir müssen auch die Breite und Höhe des einstellen #Meter Element zu 100%.

 #wrapper width: 400px; Höhe: 400px;  #meter width: 100%; Höhe: 100%;

2. Fügen Sie dem Kreis eine Kontur hinzu und entfernen Sie die Füllung

Mit der Hilfe des Schlaganfall und Strichbreite SVG-Eigenschaften fügen wir dem Kreis eine Kontur hinzu und verwenden die fill = "none" Eigenschaft entfernen wir auch die Füllung des Kreises.

3. decken Sie nur die Hälfte des Kreises ab

Das Schlaganfall-Strich Die SVG-Eigenschaft erstellt eine gestrichelte Kontur und nimmt zwei Werte an, Strichlänge und Lückenlänge.

Für den Halbkreisumriss ist der Strichlänge Der Wert muss dem Halbumfang des Kreises entsprechen, so dass der Strich die Hälfte des Kreisumfangs abdeckt Lückenlänge Wert muss entweder gleich oder größer als der verbleibende Umfang sein.

Wenn es mehr ist, wird es vom Browser in den verbleibenden Umfang konvertiert. Daher wird der volle Umfangswert für den Browser verwendet Lückenlänge. Auf diese Weise können wir die Berechnung des verbleibenden Umfangs vermeiden.

Sehen wir uns die Berechnungen an:

$Umfang = 2 Ã ?? ?? ??¢?? ?? π X r$

woher r ist der Radius. Bei einem Radius von 150 beträgt der Umfang:

$\begin{matrix} Umfang = 2 Ã ?? ?? ??¢?? ?? π X 150 \\ Umfang = 942.48 \end{matrix}$

Wenn wir es durch 2 teilen, erhalten wir 471,24 für den Halbumfang, also den Wert von Schlaganfall-Strich Eigenschaft für eine Halbkreiskontur in einem Kreis mit einem Radius von 150 ist 471,943. Dieser Halbkreis wird verwendet, um den Tiefbereich des Messgeräts zu kennzeichnen.

Wie Sie sehen, ist es verkehrt herum, also drehen wir das SVG hoch, indem Sie das hinzufügen verwandeln CSS-Eigenschaft mit dem Wert von RotateX (180 Grad) zum HTML-Element.

 #meter transform: rotateX (180deg);

4. Fügen Sie die anderen Zonen hinzu

Das mittlere Zone (blau) muss den ⅔-Teil des Halbkreises abdecken, und ⅔ von 471 ist 314. Fügen wir also unserem SVG einen weiteren Kreis hinzu, indem Sie den Schlaganfall-Strich wieder Eigentum, aber jetzt mit dem Wert von 314, 943.

  < /circle>

Das letzte Zone (rot) muss den letzten ⅓-Teil des Halbkreises abdecken, und ⅓ von 471 ist 157, also addieren wir diesen Wert zum Schlaganfall-Strich Eigentum des dritten Kreises.

5. Fügen Sie die Kontur des Messgeräts hinzu

Fügen Sie dem Messgerät eine graue Umrandung hinzu, damit es besser aussieht. Das Strichlänge des Umrisskreises muss dem Halbumfang entsprechen. Wir platzieren es vor allen anderen Kreisen im Code, damit es so ist zuerst vom Browser gerendert, und deshalb wird es sein unter den Regionskreisen angezeigt auf dem Bildschirm.

Das Strichbreite Die Eigenschaft muss etwas größer sein als die der anderen Kreise, um den Anschein einer echten Kontur zu geben.

     < /circle>

Gliederung endet

Da der Umriss die Enden des Halbkreises nicht abdeckt, fügen wir den Enden 2 Linien von etwa 2 Pixel hinzu, indem Sie einen weiteren Kreis mit a hinzufügen Strichlänge von 2px und a Lückenlänge des Halbumfangs minus 2px. Daher der Wert von Schlaganfall-Strich Eigenschaft dieses Kreises ist 2, 469.

Maske

Fügen wir nun einen weiteren Kreis nach den niedrigen, durchschnittlichen und hohen Zonen hinzu. Der neue Kreis dient als Maske zum Ausblenden der nicht benötigten Zonenbereiche, wenn das Messgerät betrieben wird.

Seine Eigenschaften sind dieselben wie die des Umrisskreises, und die Strichfarbe ist ebenfalls grau. Die Maske wird später mit Javascript verkleinert, um die darunter liegenden Zonen als Reaktion auf einen Eingaberegler anzuzeigen.

Der kombinierte Code ist wie folgt.

Wenn Sie einen Bereich unter der Maske freigeben möchten, müssen Sie die Größe der Maske reduzieren Strichlänge. Zum Beispiel, wenn der Wert von Schlaganfall-Strich Eigenschaft des Maskenkreises ist 157, 943, Die Bögen stehen in folgendem Zustand:

Also müssen wir jetzt nur noch die Einstellung vornehmen Schlaganfall-Strich der Maske mit JavaScript für die Animation. Aber bevor wir das tun, habe ich, wie bereits erwähnt, für meine letzte Demo CSS und JavaScript verwendet, um die meisten SVG-Eigenschaften zu berechnen und hinzuzufügen.

Unten finden Sie den HTML-, CSS- und JavaScript-Code, der zum gleichen Ergebnis wie oben führt.

HTML

Ich habe ein Nadelbild hinzugefügt (gauge-needle.svg), einen Bereichsschieberegler (Eingabe # Schieberegler) an die Benutzereingabe und ein Label (label # lbl), um den Schieberegler im Bereich von 0-100 anzuzeigen.

CSS

Mit dem folgenden CSS-Code werden der SVG-Formatvorlagen Stilregeln hinzugefügt, da SVG-Shapes genauso wie HTML-Elemente gestaltet werden können. Wenn Sie mehr darüber erfahren möchten, wie Sie SVG mit CSS gestalten können, lesen Sie diesen Beitrag. Um den Slider zu gestalten, checke diesen Beitrag.

 #wrapper position: relativ; Marge: auto;  #meter width: 100%; Höhe: 100%; Transformation: RotateX (180 Grad);  .circle fill: none;  .outline, #mask Strich: # F1F1F1; Hubbreite: 65;  .range Strichbreite: 60;  #slider, #lbl position: absolut;  #Slider Cursor: Zeiger; links: 0; Marge: auto; rechts: 0; Spitze: 58%; Breite: 94%;  #lbl Hintergrundfarbe: # 4B4C51; Grenzradius: 2px; Farbe weiß; Schriftfamilie: 'Kurier neu'; Schriftgröße: 15pt; Schriftdicke: fett; Auffüllen: 4px 4px 2px 4px; rechts: -48px; Spitze: 57%;  #meter_needle height: 40%; links: 0; Marge: auto; Position: absolut; rechts: 0; Top 10%; Transformationsursprung: Mitte unten; / * Orientierungsfix * / Transformation: drehen (270 Grad);

JavaScript

Im JavaScript berechnen und setzen wir zunächst die Abmessungen des Wrappers und aller Bögen und fügen dann die entsprechenden hinzu Schlaganfall-Strich Werte für die Kreise. Danach binden wir ein benutzerdefiniertes Ereignis an den Bereichsschieberegler, um die Animation auszuführen.

 / * Radius für alle Kreise einstellen * / var r = 250; var circle = document.querySelectorAll ('. circle'); var total_circles = circle.length; für (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);

Der Brauch `range_change_event ()` Funktion

Das Verhalten des Zählers wird von der übernommen range_change_event () Benutzerdefinierte Funktion, die für die Anpassung der Maskengröße und der Animation der Nadel verantwortlich ist.

Es nimmt den Schiebereglerwert (Benutzereingabe) zwischen 0-100 und konvertiert ihn in das Äquivalent des Halbumfangs (meter_value) mit einem Wert zwischen 471-0 (471 ist der Halbumfang für den Radius 150) und legt dies fest meter_value als die Strichlänge von der Maske Schlaganfall-Strich Eigentum.

Das range_change_event () Mit der benutzerdefinierten Funktion wird die Nadel auch gedreht, nachdem die Benutzereingabe (im Bereich 0-100) auf den entsprechenden Wert von 0-180 umgerechnet wurde.

Die Drehung der Nadel wird im obigen Code um 270 ° addiert, da das von mir verwendete Bild von einer aufrechten Nadel ist und ich sie zunächst um 270 ° drehen musste, damit sie flach links davon liegt.

Zum Schluss habe ich die gebunden range_change_event () Funktion des Bereichsschiebers, damit das Messgerät damit bedient werden kann.

Besuche die Demo oder werfen Sie einen Blick auf den Quellcode bei unserem Github-Repository.