Key Takeaways

• snap.svg ist eine leistungsstarke und flexible Bibliothek, die speziell für die Arbeit mit skalierbaren Vektorgrafiken (SVG) entwickelt wurde und Funktionen wie Maskierung, Ausschnitt, Muster, Gradienten und mehr anbietet.
• snap.svg erm?glicht es Entwicklern, vorhandene SVG -Inhalte und SVG -Inhalte zu animieren und zu manipulieren, die mit Snap.svg erzeugt werden, und ist mit allen modernen Browsern kompatibel.
• snap.svg ist eine Bibliothek auf niedriger Ebene, und obwohl sie noch keine Diagramme oder Datenbindungen unterstützt, ist es ideal, um komplexe Animationen und interaktive SVG-Inhalte zu erstellen.
• SVG -Elemente k?nnen in Snap.svg gruppiert werden, sodass gemeinsame Transformationen und Ereignisbehandlungen auf alle Elemente in einer Gruppe leichter angewendet werden k?nnen.
• snap.svg unterstützt die meisten SVG -Funktionen, einschlie?lich Gradienten, Mustern und Ausschnittpfade, und ist mit allen modernen Browsern kompatibel. Einige SVG -Funktionen werden jedoch m?glicherweise nicht vollst?ndig in ?lteren Browsern unterstützt.

Obwohl SVG schon seit mehr als einem Jahrzehnt gibt, wurde es in den letzten Jahren popul?r, um Diagramme in Webanwendungen zu zeichnen besondere D3.Js für Diagramme und Rapha?l für coole SVG -Zeichnungen und -animationen.

In letzter Zeit wurden

neue herausragende Bibliotheken entstanden. Sie bieten Front-End-Entwickler und Designer neue Ans?tze und erstaunliche neue Funktionen:

• snap.svg bietet, wie wir sehen werden
pathsjs ist eine minimale Bibliothek für die Erstellung von SVG-basierten Diagrammen. Es wurde entwickelt, um die reaktive Programmierung zu unterstützen, indem SVG -Pfade erzeugt werden, die mit Vorlagenmotoren verwendet werden k?nnen. Es funktioniert am besten mit einem Schnurrbart-basierten Template-Engine wie Raktiven.
Obwohl es nicht SVG-basiert ist, verdient p5 eine Erw?hnung. Es ist ein und anscheinend ein guter Versuch, traditionelle Probleme zu überwinden, die das HTML5 -Canvas -Element beeinflussen - insbesondere die Interaktion.

Im Rest dieses Artikels werden wir uns genau an Snap.svg ansehen, beginnend mit den Grundlagen.

rapha?l

Wenn Sie keine Chance hatten, sich Rapha?l an einen Blick zu werfen, sollten Sie es wahrscheinlich tun. Es ist ein sch?nes Stück JavaScript, das als Solo -Projekt von Dmitry Baranovskiy erstellt wurde. Obwohl es als pers?nliches Projekt begann, ist das Ergebnis bemerkenswert für die Schnittstelle (sehr klar und konsistent), Leistung und Aussehen (insbesondere für Animationen). Die Bibliothek ist eher auf Zeichnungen und Animationen ?Freihand“ ausgerichtet als auf Diagramme. Die Grapha?l -Erweiterung wurde sp?ter ver?ffentlicht, um dies zu beheben, ist jedoch nicht so beliebt und weit verbreitet wie D3.

Obwohl Rapha?l mit der Zeit vor anderen Bibliotheken war, zeigte Rapha?l seine Grenzen. Um beispielsweise mit ?lteren Browsern kompatibel zu sein, unterstützt Rapha?l nicht all diese coolen neuen SVG -Funktionen, die Ihre Animationen hervorheben.

Deshalb hat sein Autor beschlossen, mit einem neuen Projekt, Snap.svg, frisch zu beginnen, was natürlich von der Erfahrung profitiert, die das Design von Rapha?l gesammelt hat. Snap.svg bricht auch mit der Vergangenheit und erm?glicht die Einführung einer v?llig neuen Art von Spezialeffekten.

oh, snap!

Bevor Sie sich mit der Snaps Syntax einleiten und mit ein paar Beispielen beginnen, überprüfen wir schnell die Vor- und Nachteile dieser neuen Bibliothek:

Profis:

• Es unterstützt alle coolen Funktionen, die wir oben erw?hnt haben.
• SNAP kann sich umwickeln und vorhandene SVG animieren. Sie k?nnen Ihr SVG mit Tools wie Adobe Illustrator, Inkscape oder Sketch oder laden SVG asynchron und laden Sie die Teile, die Sie ben?tigen, um eine SVG -Datei in einen Sprite zu verwandeln.
• Es ist kostenlos und Open Source.

Nachteile:

• Es handelt sich um eine Bibliothek auf niedriger Ebene. Wenn Sie also Daten visualisieren müssen, gibt es leider noch keine Unterstützung für Diagramme.
• Es gibt keine Unterstützung für die Datenbindung.
• Snap ist ein junges Projekt, das noch nicht die volle Reife erreicht hat. Es ist bereits gro?artig, für Ihre pers?nlichen Projekte zu verwenden, aber Sie müssen diesen Aspekt gewichten, bevor Sie ihn in einem komplexen verwenden.

Wie bereits erw?hnt, verwendet Snap Funktionen, die nicht von ?lteren Browsern unterstützt werden. Obwohl eine vollst?ndige, aktualisierte Kompatibilit?tstabelle noch nicht angegeben ist, sollte diese Bibliothek zumindest mit den folgenden Browserversionen (und neuer) einwandfrei funktionieren:

• Firefox ESR 18
• dh 9.0.8
• Chrom 29
• Opera 24

Erste Schritte mit Snap

Nach dem Herunterladen der Quelldateien aus dem Github -Repository k?nnen Sie sie entpacken und nach dem DIST -Ordner suchen, der die erstellten Verteilungsdateien enth?lt. Ausführliche Anweisungen zum Erstellen von Snap mit GrunT oder für die neueste Version finden Sie hier.

Sobald Sie die minifizierte Version der Datei in den JS -Ordner Ihres neuen Projekts kopiert haben, fügen Sie einfach das Skript in Ihre HTML -Seite auf. Angenommen, es befindet sich im Stammverzeichnis Ihres Projekts, k?nnen Sie diese Zeile direkt vor dem Schlie?k?rper Tag der Seite hinzufügen:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Jetzt sind wir bereit, einen Zeichenbereich für unsere Vektorgrafik zu erstellen. Wir haben zwei M?glichkeiten, dies zu tun:

• Erstellen Sie eine brandneue Zeichenfl?che, die an das DOM der Seite (im K?rper) angeh?ngt wird.
• Verwenden Sie ein vorhandenes DOM-Element wieder und wickeln Sie es in eine Snap-Struktur ein. Sie k?nnen jedes Element einwickeln, aber für Zeichnungsmethoden ben?tigen Sie ein SVG -Element.

Mit dem ersten Weg k?nnen Sie die Breite und H?he der Oberfl?che bei der Erstellung im JavaScript -Code explizit einstellen. Wenn Sie eine gr??ere Trennung zwischen Pr?sentation und Inhalt erreichen m?chten, k?nnen Sie den zweiten Weg verwenden und die Werte in einer CSS -Regel angeben. Auf einer hohen Ebene k?nnen Sie mit der ersten Methode das Erscheinungsbild der Zeichenoberfl?che dynamisch einstellen. Wenn Sie jedoch nicht müssen, ist der zweite Weg mehr MVC-konforme. Darüber hinaus erm?glicht es Ihnen, SVG -Zeichnungen mit externen Tools zu importieren und zu ?ndern, wie im Einführungsabschnitt erw?hnt.

So ben?tigen Sie zum Beispiel einen neuen Zeichnungsbereich von 800 x 600 Pixel, sondern nur die folgende JavaScript-Zeile:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Wenn Sie stattdessen einen vorhandenen wickeln m?chten, sagen Sie #ComplexSvgfromillustrator:

<span>var s = <span>Snap</span>(800, 600);</span>

Sie k?nnen immer noch mit einer einzigen JavaScript -Zeile davonkommen, um die Zeichnungsfl?che zu importieren:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Randnotiz: Für den neugierigen Leser: Wenn Sie die SNAP -Objekte nach der Erstellung überprüfen, werden Sie feststellen, dass sie ein Papierfeld haben und Rapha?ls Verm?chtnis aussagen.

formes

Sobald wir unsere Zeichenoberfl?che, unsere Schnappverpackung erstellt haben, ist es Zeit, einige Formen darauf zu zeichnen. Angenommen, Sie m?chten einen Kreis zeichnen:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Wie Sie aus den Dokumenten sehen k?nnen, sind die ersten beiden Parameter in der Methode circle () die Koordinaten seines Zentrums, w?hrend der dritte der Radius des Kreises ist. Alle diese Parameter sind obligatorisch, und es führt zu einem Fehler, dass ein Fehler geworfen wird. Die Methode Circle () gibt wie bei allen anderen Zeichnungsmethoden einen Verweis auf ein Objekt zurück.

Sie k?nnen auch Ellipsen zeichnen, wie im folgenden Code -Beispiel gezeigt. Diesmal werden vertikale und horizontale Radien ben?tigt. Auch hier sind alle Parameter obligatorisch.

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Wenn Sie ein Rechteck zeichnen m?chten, verwenden Sie den folgenden Code. Dies erzeugt ein Rechteck mit seiner oberen linken Ecke bei (100px, 100px), einer Breite von 200px und einer H?he von 200px.

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Das coole Ding an der RECT () -Methode ist, dass es auch zwei optionale Parameter akzeptiert, die den Radius von abgerundeten Ecken unabh?ngig für vertikale und horizontale Achsen steuern. Diese Parameter standardm??ig 0, wenn Sie nicht bestanden werden, aber achten Sie darauf, dass, wenn Sie nur einen (den horizontalen Radius) übergeben, der zweite nicht auf Null gesetzt wird, sondern dass beide den gleichen Wert annehmen.

<span>var r = paper.rect(100, 100, 200, 300);</span>

Wenn Sie nun von vorne anfangen m?chten, k?nnen Sie eine andere Zeichenoberfl?che erstellen oder einfach die Papier verwenden.

Linien und Polygone

Um kompliziertere Zeichnungen abzudecken, müssen wir einen Schritt zurück treten und über Zeichnen von Linien sprechen. Wie Sie erwarten würden, nimmt die Methode die vier Koordinaten der Endpunkte einer Zeile, wie unten gezeigt, nimmt.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Was ist weitaus interessanter, die M?glichkeit, komplexe Polylines zu zeichnen: var line = paper.polyLine (10, 100, 110, 200); ist im Prinzip der obigen Linie () -Methode, aber Sie w?ren wahrscheinlich überrascht von ihrem visuellen Ergebnis. Um zu sehen, warum, versuchen wir dies

<span>var s = <span>Snap</span>(800, 600);</span>

paper.polyline () und paper.polygon () sind Aliase für dieselbe Methode, und standardm??ig wird das resultierende (geschlossene) Polygon mit schwarzer Füllung und keinem Schlaganfall gezeichnet. Aus diesem Grund konnten Sie die oben mit Polyline () gezeichnete Linie nicht sehen (obwohl Sie die Seite überprüfen k?nnen, indem Sie die Seite inspizieren, dass der SVG -Code dafür tats?chlich an seinen Container angeh?ngt wurde).

Um dieses Verhalten sowie das Erscheinen anderer Elemente zu ?ndern, müssen wir Attribute einführen.

Attribute

Der Begriff von Attributen für Snap -Elemente ist etwas breiter als gew?hnlich, was bedeutet, dass sowohl HTML -Attribute als auch CSS -Attribute unter derselben Schnittstelle enth?lt (w?hrend die meisten anderen Bibliotheken zwischen .Attr () Methode für HTML -Attribute und 'unterscheiden. style () 'für CSS). Durch die Verwendung der Methode von Element.attr () auf einem Snap -Wrapper -Objekt k?nnen Sie seine Klasse oder ID sowie seine Farbe oder Breite festlegen.

Wie oben erw?hnt, haben Sie mit SNAP zwei M?glichkeiten, um einem Element CSS -Eigenschaften zuzuweisen. Einer besteht darin, diese Eigenschaften in eine separate CSS -Datei aufzunehmen und dann Ihrem Element einfach die richtige Klasse zuweisen:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Das gleiche Ergebnis kann erhalten werden, indem diese Eigenschaften mit JavaScript zugewiesen werden:

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Wieder erm?glicht der erste Weg eine bessere Trennung zwischen Inhalt und Pr?sentation, w?hrend der zweite die M?glichkeit bietet, die Attribute dynamisch zu ?ndern. Wenn Sie darüber nachdenken, die beiden Strategien zu mischen, denken Sie daran, dass die in einer CSS -Datei definierten Regeln den, den Sie mit Element.attr () zuweisen, trotz der zeitlichen Reihenfolge, in der sie Elementen zugeordnet sind, übertragen werden.

Wenn Sie keine Referenz auf das Element beibehalten haben, das Sie stylen m?chten, k?nnen Sie es einfach mit CSS -Selektoren greifen:

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Gruppen

SVG -Elemente k?nnen so gruppiert werden, dass gemeinsame Transformationen und Ereignisbehandlungen auf alle Elemente einer Gruppe leichter angewendet werden k?nnen. Das Erstellen einer Gruppe ist einfach:

<span>var r = paper.rect(100, 100, 200, 300);</span>

Seien Sie vorsichtig: Ordnung oder die Argumente sind wichtig! Zweitens, wenn Sie einer Gruppe ein Element zuweisen, wird es von jeder Gruppe entfernt, zu der es bereits geh?rt.

Elemente k?nnen natürlich auch zu vorhandenen Gruppen hinzugefügt, nachdem sie erstellt wurden:

<span>var rect = paper.rect(100, 100, 200, 300, 10); //equivalent to  paper.rect(100, 100, 200, 300, 10, 10);</span>

Bilder

SNAP unterstützt die Nesting -Raster -Bilder innerhalb von SVG -Elementen, laden Sie asynchron und werden nur nach Abschluss der Last angezeigt.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Das resultierende Objekt kann als SVG -Element behandelt werden. Hinweis, wenn Sie Select () für Bilder verwenden, um sie sp?ter abzurufen, ist der erstellte Wrapper die für HTML -Elemente, sodass die meisten Methoden für SVG -Elemente nicht unterstützt werden.

Transformationen

Wir haben gesehen, wie man asymmetrische Polygone wie Ellipsen und Rechtecke zeichnet. Grundlegende Methoden beschr?nken uns jedoch, diese Zahlen zu zeichnen, die an den kartesischen Achsen ausgerichtet sind. Was w?re, wenn wir eine Ellipse zeichnen wollten, deren Achsen in Bezug auf die X-Y-Achsen 45 ° gedreht sind? Wir k?nnen dies nicht in den Erstellungsmethoden angeben, aber wir k?nnen Transformationen verwenden, um dasselbe Ergebnis zu erzielen.

Ebenso müssen wir m?glicherweise ein Bild drehen oder irgendwann nach seiner Erstellung ein Element (oder eine Gruppe) verschieben. Mit der Methode von Transformation () erm?glicht es uns, dies zu tun, indem wir eine SVG -Transformationszeichenfolge übergeben:

<span>var s = <span>Snap</span>(800, 600);</span>

Diese Methode kann entweder eine Zeichenfolge oder ein Objekt als Eingabe annehmen. Wir k?nnen auch die Transformationsmatrix verwenden, die einem Element zugeordnet ist, um dieselbe Transformation auf ein anderes Element anzuwenden:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Seien Sie vorsichtig: Der Transformationszentrum für das zweite Element wird immer noch der für das erste verwendete sein. Der endgültige Effekt k?nnte Sie überraschen.

Die Methode von Transformation () kann auch verwendet werden, um das Transformationsdeskriptorobjekt für das Element abzurufen, das aufgerufen wird. Nennen Sie es einfach ohne Argumente. Dieser Deskriptor kann verwendet werden, um die lokale Transformationsmatrix und die Differenzmatrix bei verschachtelten Elementen abzurufen:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Schlussfolgerung

Dieser Artikel lieferte eine Einführung in die Grundlagen von Snap.svg. Wenn Sie daran interessiert sind, das coolste Zeug zu sehen, bleiben Sie bitte dran, da ein fortgeschrittenes Follow-up bald ver?ffentlicht wird.

Wenn Sie mehr über Datenvisualisierung und SNAP erfahren m?chten, finden Sie hier einige nützliche Ressourcen:

1. snap.svg Tutorial.
2. Folien aus einer Pr?sentation über Datenvisualisierung und erweiterte Techniken.
3. Schauen Sie sich einen Teil des oben genannten Codes in Aktion auf CodePen an.

h?ufig gestellte Fragen (FAQs) zu Snap SVG

Was ist der Unterschied zwischen SNAP SVG und anderen SVG -Bibliotheken? Im Gegensatz zu anderen SVG -Bibliotheken bietet SNAP SVG eine einfache und intuitive API zum Animieren und Manipulieren vorhandener SVG -Inhalte und SVG -Inhalte, die mit SNAP SVG generiert werden. Es unterstützt auch die meisten SVG -Funktionen, einschlie?lich Gradienten, Muster und Ausschnittpfade, und ist mit allen modernen Browsern kompatibel. Sie müssen die Snap SVG JavaScript -Datei in Ihr HTML -Dokument aufnehmen. Sie k?nnen es von der offiziellen Snap SVG -Website herunterladen oder direkt von einem CDN einbeziehen. Sobald Sie die SNAP -SVG -Datei eingeschlossen haben, k?nnen Sie mit der SNAP -SVG -API SVG -Inhalte erstellen und manipulieren.

.

Kann ich Snap SVG für komplexe Animationen verwenden? Es bietet eine leistungsstarke Animations -API, mit der Sie jedes SVG -Attribut animieren k?nnen. Sie k?nnen auch die Matrix -Transformationen von SNAP SVG verwenden, um komplexe Animationen problemlos zu erstellen. Au?erdem unterstützt SNAP SVG die Lockerungsfunktionen, mit denen glatte und natürliche Animationen erstellt werden k?nnen.

Ist Snap SVG mit allen Browsern kompatibel? , Firefox, Safari, Opera und Internet Explorer 9 und h?her. Einige SVG -Funktionen werden jedoch m?glicherweise nicht vollst?ndig in ?lteren Browsern unterstützt. . Sie k?nnen die Ereignisbearbeitungsfunktionen von SNAP verwenden, um auf Benutzerinteraktionen wie Klicks oder Mausbewegungen zu reagieren. Sie k?nnen auch die Animations -API von SNAP SVG verwenden, um interaktive Animationen zu erstellen.

Kann ich Snap SVG mit anderen JavaScript -Bibliotheken verwenden? Es st?rt andere Bibliotheken nicht und ?ndert keine nativen JavaScript -Objekte. Dies macht SNAP SVG eine gro?artige Wahl für Projekte, die andere JavaScript -Bibliotheken verwenden. Sie k?nnen die Funktionen von SNAP -SVG verwenden, um die Attribute von SVG -Elementen zu ?ndern, SVG -Elemente zu transformieren und SVG -Elemente animieren. Sie k?nnen auch die Auswahlfunktionen von SNAP SVG verwenden, um bestimmte SVG -Elemente auszuw?hlen.

Kann ich SNAP -SVG verwenden, um SVG -Filter zu erstellen? Sie k?nnen die Filterfunktionen von SNAP SVG verwenden, um SVG -Filter auf SVG -Elemente zu erstellen und anzuwenden. Auf diese Weise k?nnen Sie eine breite Palette von visuellen Effekten erstellen, z. B. Unsch?rfe, Beleuchtung und Farbanpassungen.

Wie kann ich Gradienten mit Snap SVG erstellen? Erstellen von SVG -Gradienten. Sie k?nnen die Gradientenfunktionen von Snap SVG verwenden, um lineare und radiale Gradienten zu erstellen, und Sie k?nnen die Farbfunktionen von Snap SVG verwenden, um die Farben des Gradienten zu definieren. ??> Ja, SNAP SVG unterstützt SVG -Muster. Sie k?nnen die Musterfunktionen von SNAP SVG verwenden, um SVG -Muster auf SVG -Elemente zu erstellen und anzuwenden. Auf diese Weise k?nnen Sie eine breite Palette von visuellen Effekten erstellen, wie z. B. Texturen und Muster.

Das obige ist der detaillierte Inhalt vonEine Einführung in Snap.svg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!