Eine ausführliche Analyse der SVG_html5-Tutorial-Techniken in HTML5

SVG-Hintergrund

SVG ist die Abkürzung für Scalable Vector Graphics, was skalierbare Vektorgrafiken bedeutet. Im Jahr 1998 gründete das World Wide Web Consortium eine Arbeitsgruppe zur Entwicklung einer Technologie zum Ausdruck von Vektorgrafiken durch XML – SVG! Da SVG auch eine XML-Datei ist, erbt SVG auch die Vorteile der Offenheit, Portabilität und Interaktivität von XML. Heutzutage unterstützen fast alle gängigen Browser SVG. Weitere Informationen zur Kompatibilität erhalten Sie hier, darunter:

Verwenden Sie -Elemente, um grundlegende SVG-Grafiken anzuzeigen.
Verwenden Sie die SVG-Grafiken direkt
Verwenden Sie SVG-Transformationen, Filter und andere Spezialeffekte für HTML-Elemente, die CSS oder externe Objektelemente verwenden Unschärfe und Farbmanipulation;
Verwenden Sie Animationen mit SVG-Bildern;
Verwenden Sie Schriftarten im SVG-Format
* SVG
* Grundlegende Inhalte
* SVG ist kein exklusiver Inhalt von HTML5

* HTML5 bietet native Inhalte zu SVG

* Vor dem Aufkommen von HTML5 gab es SVG-Inhalte
* SVG ist einfach ausgedrückt ein Vektorbild
* Die Erweiterung der SVG-Datei ist „.svg“
* SVG verwendet XML-Syntax
* Konzept
* SVG ist eine Beschreibung mithilfe der XML-Technologie Die Sprache von zweidimensionale Grafiken
* Funktionen von SVG
* SVG-gezeichnete Grafiken können von Suchmaschinen gecrawlt werden
* SVG kann vergrößert werden, ohne die Qualität des Bildes zu beeinträchtigen
* Der Unterschied zwischen SVG und Canvas
* SVG
* Hängt nicht von der Auflösung ab
* Unterstützt Ereignisbindung
* Programme mit großen Renderingbereichen (wie Baidu Maps)
* Kann nicht zur Implementierung von Webspielen verwendet werden
* Leinwand
* Hängt von der Auflösung ab
* Unterstützt keine Ereignisbindung
* Am besten geeignet für Webspiele
* Bilder im „.jpg“-Format speichern
* Verwendung
* Einige kleine Dateien auf Webseiten-Symbolen
* Dynamische Spezialeffekte (Animationseffekte) in Webseiten
* Verwenden Sie SVG in HTML5
* Verwenden Sie -Elemente
* Funktion – ähnlich wie < ;canvas>-Elemente
* Die Standardgröße ist 300px*150px
* Verwenden Sie den CSS-Stil
* Verwenden Sie SVG zum Zeichnen von Grafiken. Sie müssen das Element
* Zeichnen von Grafiken * Rechteckiges Element





Kopieren Sie den Code

Der Code lautet wie folgt:

< ;!--
Wenn Sie das SVG-Tag in einer HTML-Seite verwenden
* Definieren Sie das -Element
* Ähnlich der Rolle des > * Standardgröße 300px * 150px
* Breite und Höhe festlegen – Attribute und Stil
* Alle mit SVG gezeichneten Grafiken müssen innerhalb des
* Mit SVG gezeichnete Grafiken beziehen sich auf HTML Seiten
-->






< /html>
* Kreiselement







* Ellipsenelement






* Linienelement





< Zeile x1="200" y1="200" x2="200" y2="10" Stroke-width="10" Stroke="black"/>

< ;/ body>
* Polylinienelement



< !--
Element – ​​Polylinie
* Punkte – Legen Sie den Startpunkt, den Scheitelpunkt und den Endpunkt fest
* Verwenden Sie ",", um x und y zu trennen
* Verwenden Sie zwischen mehreren Punkte Durch Leerzeichen getrennt
Eigenschaften der Polylinie
* Der Bereich in der Polylinie (Startpunkt bis Endpunkt) wird standardmäßig in Schwarz angezeigt
-->



* Polygonal Element






* Spezialeffektelemente
* Farbverlauf – das Farbverlaufselement wird innerhalb des -Elements definiert
* Linearer Farbverlauf –
* Dieses Element ist das Startelement














< /svg>

* Sektor-(Strahlen-)Gradient-
* Filter-Gaußsche Unschärfe
* Filter verwendet -Element
* Element-Gaußsche Unschärfe
* in ="SourceGraphic"
* stdDeviation – Stellen Sie den Unschärfegrad ein

Code kopieren

Der Code lautet wie folgt:

Verändere dich um des Lebens willen, erschaffe um der Veränderung willen.