Share
Es versteht sich von selbst, dass SVG nicht so weit verbreitet ist, wie es viele Leute in der Webentwicklungsgemeinschaft glauben könnten. Wenn ich die Debatte beiseite lege, werde ich in diesem Tutorial zeigen, wie Inline-SVGs verwendet werden, eine Reihe von Techniken abdecken und die Interaktion zwischen Webseite und Grafik untersuchen. In Verbindung mit anderen aufkommenden Standards in HTML5, JavaScript und CSS3 können Inline-SVGs die Benutzererfahrung erheblich verbessern.
Sie können mit den SVG-Elementen mithilfe von DOM-Techniken wie mit anderen Webseitenelementen interagieren.
In diesem Lernprogramm werden wir ein praktisches Beispiel einer Inline-SVG durcharbeiten, indem wir eine einfache Komponente erstellen, die ein Plattenfach darstellt. Der Datensatz wird gedreht und der Benutzer kann mit ihm interagieren - drücken, um ihn zu verlangsamen, und loslassen, um ihn wieder zu beschleunigen. Das SVG enthält auch eine Schaltfläche, auf die Benutzer klicken können, um den Datensatz zu ändern, wodurch sich das Erscheinungsbild geringfügig ändert. Die sichtbaren SVG-Elemente werden um Farbverläufe und Schattenfilter erweitert.
Schauen Sie sich jetzt die Demo an, damit Sie eine klare Vorstellung davon haben, was wir bauen.
Wie Sie wahrscheinlich wissen, fallen Inline-SVGs unter die aufkommenden HTML5-Standards. Daher wird der in diesem Lernprogramm verwendete Code nicht von allen Browsern vollständig unterstützt. Obwohl Inline-SVGs theoretisch in allen aktuellen Versionen der wichtigsten Browser unterstützt werden, werden die von uns verwendeten internen Animationen und interaktiven Effekte noch nicht so gut unterstützt. Das Endergebnis sollte in den aktuellen Versionen von Firefox, Chrome und Opera korrekt funktionieren. Stellen Sie wie bei HTML5-Techniken sicher, dass Sie sich nicht auf diese Effekte auf Live-Sites stützen, an denen Sie arbeiten, und fügen Sie, sofern möglich, Alternativen hinzu.
Lassen Sie uns eintauchen und beginnen Sie mit dem Erstellen einer HTML5-Seitengliederung:
Einer der Hauptvorteile bei der Verwendung von SVG ist die Skalierbarkeit. Um dies auszunutzen, verwenden wir hauptsächlich relative Werte, um den SVG-Inhalt zu definieren. Fügen Sie im Seitentext ein Containerelement für die SVG hinzu:
Fügen Sie dem Stilabschnitt in Ihrem Seitenkopf Folgendes hinzu, um zu sehen, wie sich die SVG im übergeordneten Element befindet:
#picHolder background: #dedeff; Grenze: 1px fest # 666666;
Fügen Sie im Containerelement im Hauptteil Ihrer Seite die SVG-Elementgliederung wie folgt hinzu:
Wir haben Breite und Höhe auf 100% gesetzt, da wir die Breite des übergeordneten Elements festlegen werden. Anstatt die Dimensionen jedoch explizit anzugeben, verwenden wir stattdessen eine JavaScript-Funktion, um anzuzeigen, wie leicht Sie die SVG-Werte nach oben und unten skalieren können. Sie können dem öffnenden SVG-Tag oder dem Stilabschnitt eine feste Breite und Höhe hinzufügen.
Die sichtbaren Formen in der Grafik werden im SVG-Element definiert. Davor arbeiten wir an der defs Sektion. Das defs In diesem Abschnitt platzieren Sie Definitionen, auf die Sie später beim Erstellen Ihrer Formen zurückgreifen können. Für dieses Tutorial ist das defs Der Abschnitt enthält Definitionen für einige Farbverläufe und einige Schatten. Fügen Sie diesen neuen Abschnitt im SVG-Element hinzu:
Die Elemente, die wir in diesem Abschnitt platzieren, werden nicht wirklich im Bild angezeigt, sondern werden als Füllungen und Filter für die entsprechenden Formen verwendet. Wir werden mehrere Farbverläufe hinzufügen. Lassen Sie uns also nacheinander durcharbeiten.
An erster Stelle steht ein linearer Gradient:
Dieser Farbverlauf wird als Füllung für den Hintergrund des Rechteckhintergrunds angegeben. Das x1 und y1 Attribute stellen die Startpunkte des Farbverlaufs innerhalb der gefüllten Form dar, wobei sich der Farbverlauf von dort zu dem von entfalteten Punkt entfaltet x2 und y2. In diesem Fall läuft der Farbverlauf von oben nach unten. Die Stoppelemente repräsentieren Farbpunkte im Farbverlauf. Der erste besagt, dass 10% vom Beginn des Farbverlaufs eine durchgehende dunkelrote Farbe sind und der zweite Stopp, dass 90% vom Ende des Farbverlaufs eine gelbe Farbe ist. Zwischen diesen beiden Punkten mischt der Farbverlauf die Farben ineinander. Beide Farben haben volle Deckkraft.
Als Nächstes fügen wir einen Verlauf für den Datensatz selbst hinzu. Dieser ist etwas komplexer - es ist ein radialer Farbverlauf mit mehreren Farbstopps:
Ein radialer Gradient beginnt im Inneren des Kreises, wobei der innerste und äußerste Teil des Kreises durch definiert ist cx, cy, fx und fy, entlang des Radius aufgelistet. In diesem Fall nimmt der radiale Gradient die gesamte kreisförmige Aufzeichnungsform ein. Der Hauptteil der Platte wird schwarz sein, wobei zwei Ringe mit etwas hellerer Farbe die glatteren Abschnitte in der Mitte der Platte und ihre Kanten darstellen. Wir werden auch ein Label in der Mitte der Platte platzieren, so dass der erste Fleck hellerer Farbe direkt außerhalb der Platte erscheint. Fügen Sie als nächstes den Etikettenverlauf hinzu:
Dies ist ein einfacher linearer Farbverlauf, der als Füllung für die kreisförmige Datensatzbeschriftung verwendet wird. Beachten Sie jedoch, dass die Gradienten-ID am Ende eine Null hat. Dies ist auf die Tatsache zurückzuführen, dass wir eine interaktive Funktion hinzufügen werden, die es dem Benutzer ermöglicht, den Datensatz zu ändern. Eine JavaScript-Funktion wechselt zwischen einem Bereich von Farbverlaufsfüllungen für das Beschriftungselement. Fügen Sie zu diesem Zweck ein paar weitere Farbverläufe hinzu:
Die Farbverläufe haben jeweils eine ID, die mit einer inkrementierenden Ganzzahl endet, sodass wir sie in JavaScript durchlaufen können. Definieren Sie nun einen weiteren Verlauf, um einen Glanzeffekt über dem Datensatz zu erzeugen:
Der Farbverlauf verwendet diesmal opake und alpha-transparente Farbstopps. Der Effekt wird ein subtiler Glanz auf der Platte sein. Schließlich brauchen wir eine metallische Füllung für Knopf und Spindel:
Diesmal befindet sich der radiale Gradient etwas außerhalb der Mitte, um ein Gefühl von Tiefe und Licht zu erzeugen, das durch einen Schattenfilter ergänzt wird.
Bevor wir mit dem Schluss fertig sind defs Fügen Sie in diesem Abschnitt einige Schatten hinzu, um den Formen etwas mehr Tiefe zu verleihen:
Dieser erscheint hinter dem Aufnahmebereich. Das x, y, Breite und Höhe Eigenschaften beziehen sich auf die Position und die Abmessungen innerhalb der Form, die diesen Filter verwenden. Der Versatz definiert den Schatten relativ zur ursprünglichen Form. Die Unschärfe verhindert, dass die Versatzform einfarbig ist, sodass sie als Schatten erscheint. In diesem Fall wird nur der Schatten angezeigt, nicht die Form selbst. Der Schatten wird durch eine dedizierte Form definiert, die hinter der Datensatzform platziert wird. Für die Benutzersteuerelemente, die kreisförmig und metallisch sind, möchten wir auch einen Schatten, aber auch die Form selbst soll angezeigt werden:
Dieser Hauptunterschied ist hier, abgesehen von der Skalierung des Schattens, das Überblendungselement, das die ursprüngliche Form beibehält und gleichzeitig den Schatten um den Schatten zeigt.
Das ist genug Vorbereitung; lass uns mit der Grafik weitermachen! Jedes Element, das Sie dem Hauptteil der SVG-Datei hinzufügen, wird über den zuvor aufgelisteten Elementen angezeigt. Wir arbeiten also von unten nach oben, beginnend mit den Formen auf der Rückseite und enden mit den Elementen an der Vorderseite.
Fügen Sie zunächst eine Rechteckform für den Hintergrund hinzu:
Das Rect Elementmaße und -position werden relativ zu der enthaltenden SVG angegeben, die, wenn Sie sich erinnern, relativ zur Größe des enthaltenden Elements ist. Wir werden dies später in JavaScript festlegen. Wir werden, wo immer möglich, relative Größen- und Positionswerte verwenden, so dass das gesamte Bild plus Animation und Interaktion je nach Bedarf vergrößert oder verkleinert werden kann. Beachten Sie, dass die Elementfüllung mithilfe des ID-Attributs einen der von uns definierten Farbverläufe angibt.
Der unterste Schatten ist der Datensatzschatten, der einen der von uns erstellten Schattenfilter verwendet:
Der Schatten wird hinter der Platte liegen, als kreisförmige Form mit einem Radius, der ungefähr einem Drittel des Raums entspricht, der dem Bild zugeordnet ist und in der Mitte liegt. Da der Filter in diesem Fall nicht mit dem Bild gemischt wird, wird der Kreis selbst nicht angezeigt, sondern nur der Schatten.
Als nächstes ist der Rekord selbst:
Wie beim Schatten der cx und cy Attribute stellen den Mittelpunkt des Datensatzes dar, der horizontal und vertikal im Bild mit einem Radius von etwa einem Drittel zentriert ist. Wieder verwenden wir einen der von uns definierten Farbverläufe, die wir in jeder Form ausführen werden.
Oben auf dem Datensatz befindet sich das Label. Fügen Sie es als Nächstes hinzu:
Der Beschriftungskreis hat den gleichen Mittelpunkt wie der Datensatz, über den er sich über ein Drittel des Weges erstreckt. Wir beginnen mit der ersten der von uns definierten Etikettenverlaufsoptionen und werden den Benutzer später zwischen diesen umschalten. Wir fügen hier ein ID-Attribut ein, um auf dieses Element in JavaScript zu verweisen.
Jetzt lassen Sie uns etwas mehr Glanz auf die Platte bringen:
Wenn sich die Platte dreht, bewegt sie sich ein wenig nach rechts und unten, so dass wir den Glanz etwas kleiner halten als die Platte, so dass er sich nicht weiter auszubreiten scheint, wenn er sich bewegt. Dieses Element verfügt außerdem über ein ID-Attribut zur Erkennung von Benutzerinteraktionen.
Der Vollständigkeit halber fügen wir eine kleine Spindel in die Mitte des Datensatzes ein:
Diese Form verwendet den von uns erstellten metallischen Gradienten. Wir wenden auch den zweiten Schattenfilter an, der das Mischen umfasst, sodass sowohl Form als auch Schatten angezeigt werden.
Zu guter Letzt brauchen wir noch eine kleine Schaltfläche, mit der Benutzer die Änderung des Datensatzes steuern können, indem sie dieselbe Füllung und denselben Filter wie die Spindel verwenden:
Diesmal trennen wir anstelle eines selbstschließenden Elements die Tags für den öffnenden und den schließenden Kreis. Dies liegt daran, dass wir die Schaltfläche animieren, wenn Benutzer darauf klicken, und den Animationseffekt zwischen diesen Tags einfügen. Beachten Sie, dass wir Füll- und Filterelemente aus dem Ordner wiederverwenden konnten defs Sektion. Hier sehen Sie das anfängliche Erscheinungsbild der Grafik, sobald die Seitenmaße eingefügt wurden:
Jedes Element, das Sie dem Hauptteil der SVG hinzufügen, wird über den zuvor aufgelisteten Elementen angezeigt.
Jetzt haben wir unsere visuellen Elemente an Ort und Stelle, einige Animationen. Wir können die Aufnahme mit SVG-Animationstransformationen, einer Erweiterung der SMIL-Animation, drehen. Diese animierten Effekte werden im SVG-Markup definiert. Ein Effekt gilt für alle SVG-Elemente, in denen er erscheint. Sie können CSS3-Transformationen für SVG-Elemente verwenden, aber die SMIL-basierten Alternativen bieten Ihnen mehr Kontrolle.
Wir werden zwei einfache Animationen hinzufügen: Der Datensatz wird gedreht und die Schaltfläche bewegt sich ein wenig, wenn der Benutzer darauf klickt. Beginnen wir mit der etwas geradlinigeren Animation für die Schaltfläche.
Fügen Sie innerhalb des Schaltflächenformelements zwischen den von uns erstellten öffnenden und schließenden Kreis-Tags die animierte Transformation wie folgt hinzu:
Das animateTransform Gilt für ein XML-Attribut innerhalb des Elements, in dem es angezeigt wird. In diesem Fall handelt es sich um eine Übersetzungsumwandlung. Das von und zu Attribute stellen die Start- und Endpositionen des Elements dar. Diese sind relativ zu der Startposition. Die Schaltfläche bewegt sich dann um ein Pixel nach rechts und nach unten. Die Transformation beginnt, wenn ein Benutzer klickt, über eine Zehntelsekunde verstreichen und einmal ausgeführt wird. Die Schaltfläche kehrt nach Beendigung der Animation in ihre ursprüngliche Position zurück. Tipp: Um ein Element nach einer Animation an der Endposition zu halten, geben Sie Folgendes an füllen = "einfrieren".
Nun zum Spinnen der Platte. Ein animateTransform gilt für ein SVG-Element, aber wir müssen den Spin auf mehr als ein Element anwenden, insbesondere auf den Datensatz und das Label (nicht auf den Glanz oder den Schatten). Anstatt separate Animationen für jede zu erstellen und gleichzeitig auszuführen, können wir eine einzelne Transformation verwenden, indem wir diese Elemente zusammenfassen. Fügen Sie vor dem Kreiselement, das den Datensatz darstellt (mit "recordGrad" als Füllung), ein Eröffnungsgruppen-Tag hinzu:
Schließen Sie nach dem Kreis, der die Beschriftung darstellt, die Gruppe:
Fügen Sie nun die Transformation vor diesem schließenden Gruppentag hinzu, damit sie für die gesamte Gruppe gilt:
Der animierte Effekt ist diesmal eine Drehtransformation. Das Element wird um 360 Grad gedreht. Um den Effekt zu erhöhen, wird es bei jeder Drehung um einen einzelnen Pixel um einen einzelnen Pixel über einen Zeitraum von einer Sekunde nach rechts und unten verschoben und wiederholt sich auf unbestimmte Zeit. Diese Transformation umfasst auch a von Attribut, da es notwendig ist, die Ausgangsposition der Elemente anzugeben, die gedreht werden. Wenn Sie diese Position nicht angeben, drehen sich die Elemente um die 0, 0 Punkt standardmäßig. Momentan können Sie jedoch keine relativen (d. H. Prozentualen) Werte zu diesen Attributen angeben, sondern nur feste Werte. Aus diesem Grund werden wir das festlegen von Attribut, wenn wir die SVG-Dimensionen in JavaScript angeben.
Lassen Sie uns nun unsere interaktiven Funktionen implementieren: Klicken Sie auf die Schaltfläche, um den Datensatz zu ändern, und drücken Sie den Datensatz, um ihn zu verlangsamen.
Fügen Sie im Skriptabschnitt Ihres Seitenkopfes zunächst diese Variablen hinzu, um die Etikettenentwürfe zu zählen und zu verfolgen:
// Verfolgung des aktuellen Datensatzlabels var currLabel = 0; // Ändern Sie dies für eine andere Anzahl von Etiketten var numLabels = 3;
Fügen Sie nun innerhalb des Eröffnungs-Tags für das Kreiselement, das die Schaltfläche darstellt (die jetzt eine Animation zwischen ihren Tags hat) den folgenden Klickereignis-Listener hinzu:
onclick = "changeRecord ()"
Fügen Sie wieder im Kopfskriptabschnitt die Funktionsgliederung hinzu:
Funktion changeRecord ()
Jedes Mal, wenn der Benutzer die Taste drückt, gehen wir zum nächsten Etikett und kehren zum ersten zurück, wenn wir das letzte Etikett erreichen:
Accentsconagua
// zum nächsten Label wechseln currLabel ++; // reset wenn bei höchster Zahl if (currLabel> numLabels - 1) currLabel = 0; // Setze das fill-Attribut auf den nächsten Farbverlauf document.getElementById ("recordLabel"). setAttribute ("fill", "url (#labelGrad" + currLabel + ")"); In der letzten Zeile wird gezeigt, wie Sie mit den SVG-Elementen mithilfe von DOM-Techniken wie mit anderen Webseitenelementen interagieren können. Hier setzen wir die füllen Attribut des Beschriftungskreiselements für die nächste Farbverlaufsfüllung, wobei die Füllungs-ID angegeben wird.
Fügen Sie dem record shine -Element (mit "shineGrad" als Füllung) die folgenden Ereignisattribute hinzu, da Sie mit Maus-Down- und -up-Ereignissen darauf triggern möchten, um die Aufzeichnung zu verlangsamen und wieder zu beschleunigen:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
Fügen Sie im Skriptabschnitt die Funktion hinzu, wenn ein Benutzer auf den Datensatz drückt:
// Funktion, die aufgerufen wird, wenn der Benutzer die Record-Funktion onRecord () drückt
Innerhalb dieser Funktion können Sie die Animation der Aufnahme drehen, indem Sie das ändern animateTransform Dauerattribut. Wir ändern auch die Deckkraft des Glanzes, um den Eindruck des Herunterdrückens zu erzeugen:
// die Animationsdauer verlangsamen document.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // die Deckkraft des Glanzes verringern document.getElementById ("Glanz"). style.opacity = "0.7"; Wenn der Benutzer den Datensatz freigibt, möchten wir, dass er zur normalen Geschwindigkeit und zum normalen Erscheinungsbild zurückkehrt. Fügen Sie als Nächstes die Funktion "Mouse Up" hinzu:
// Funktion, die aufgerufen wird, wenn der Benutzer die Record-Funktion freigibt offRecord () // auf normale Geschwindigkeit zurücksetzen document.getElementById ("spinTrans"). setAttribute ("dur", "1s"); // Setzt die Deckkraft auf normal document.getElementById ("shine"). style.opacity = "1.0"; Wir können jetzt die Gesamtgröße des SVGs festlegen. Fügen Sie am oberen Rand des Skriptabschnitts eine neue Variable hinzu:
// gewünschte Größe von SVG var size = 300;
Wir werden zunächst verwenden 300 Pixel für die Breite und Höhe der Grafik, Sie können dies jedoch jederzeit ändern. Definieren Sie im Skriptabschnitt eine Funktion, um diese Dimensionen festzulegen:
// Funktion zum Setzen von SVG-Dimensionen function setSize () // set css und transform size var holder = document.getElementById ("picHolder"); holder.style.height = Größe + "px"; holder.style.width = size + "px"; document.getElementById ("spinTrans"). setAttribute ("from", "0," + size / 2 + "," + size / 2 + ""); Wir setzen die Größe auf den Inhalt div Element. Schauen Sie sich die letzte Zeile in dieser Funktion an. Da die Animation für die Drehtransformation keine relativen Prozentwerte verwenden kann, müssen Sie die Option festlegen von Element, das die Größenvariable verwendet (für den zentralen Punkt des Datensatzes durch zwei geteilt). Mit 300 als SVG-Größe würde die Transformation mit festen Werten so aussehen:
Wenn Sie feste Werte in Ihrer SVG verwenden möchten, können Sie dies tun. Wir verwenden diese Technik nur, um relative Dimensionen zu demonstrieren. Rufen Sie schließlich diese Funktion am Ende des Skriptabschnitts auf:
window.addEventListener ("DOMContentLoaded", setSize, false); Unsere interaktive SVG-Animation ist jetzt abgeschlossen! Öffnen Sie Ihre Seite in einem unterstützenden Browser, um den Effekt anzuzeigen. Vergessen Sie nicht, mit dem Record und der Schaltfläche zu interagieren. Ändern Sie die Größenvariable, um zu sehen, wie sich die SVG-Elemente anpassen, einschließlich der Animationen und Interaktionen.
Wenn Sie SVG weiter erkunden möchten, sollten Sie einige Themen wie Pfade, Text, Maskieren und Beschneiden berücksichtigen. Es gibt auch eine Reihe zusätzlicher Animationsoptionen, die berücksichtigt werden müssen. Natürlich werden diese Effekte momentan nicht für alle Benutzer funktionieren, aber hoffentlich bald eines Tages…
