SVG in HTML | Tutorial mit Beispielen
Das World Wide Web Consortium (W3C) empfiehlt die SVG -Technologie, Grafiken auf einer Website zu zeichnen. In HTML Tag wird als Container für SVG -Grafiken verwendet. Mit SVG können wir Pfade, Kreise, Rechtecke usw. zeichnen. In diesem Artikel wird Sie mit SVG-Bildern gearbeitet und einen detaillierten Überblick in den folgenden Aspekten präsentieren:
- Grundlagen von SVG
- Wie man SVG -Linie in HTML zeichnet
- Wie man den SVG -Kreis in HTML zeichnet
- Wie man SVG -Rechteck in HTML zeichnet
- Wie man SVG abgerundetem Rechteck in HTML zeichnet
- Wie man SVG Polygon in HTML zeichnet
- Wie man SVG Eclipse HTML zeichnet
So lass uns anfangen!
Grundlagen von SVG
Skalierbare Vektorgrafiken bestimmen XML-basierte Vektorgrafiken/Bildformate für die Web-Technologien. SVG -Dateien können animiert werden und wir können sie in andere W3C -Standards wie DOM und XSL integrieren. SVG liefert qualitativ hochwertige Bilder i.e. Wenn jemand ein SVG -Bild zoomt, wäre die Qualität des Bildes nicht betroffen.
Wie man SVG -Linie in HTML zeichnet
HTML -Tag kann innerhalb der verwendet werden Tag zum Zeichnen einer Linie. Mit dem folgenden Beispiel können Sie verstehen, wie Sie eine SVG-Linie in HTML zeichnen können.
Beispiel
Das folgende Code zeichnet eine einfache Zeile:
Hier im obigen Snippet, X1, Y1 sind die Ausgangspunkte der Linie und x2, Y2 sind die Endpunkte der Linie. Während wir die Farbe der Linie im Style -Attribut angeben:
Die Ausgabe überprüft, dass eine blau gefärbte Linie gemäß den von ihren Attributen festgelegten Positionen gezogen wird.
Wie man den SVG -Kreis in HTML zeichnet
HTML -Tag kann innerhalb der verwendet werden Tag zum Zeichnen eines Kreises.
Beispiel
Mit dem folgenden Snippet können Sie einen SVG-Kreis erstellen:
Wir haben den Wert der X-Achse und der y-Achse als 40 bzw. 50 zusammen mit dem Radius von 30 Pixel angegeben. Im Folgenden finden Sie die Ausgabe:
Ausgabe prüft, dass der Kreis in blauer Farbe gezeichnet und mit grauer Farbe gefüllt ist.
Wie man SVG -Rechteck in HTML zeichnet
Das Tag kann im Tag zum Zeichnen eines Rechtecks verwendet werden.
Beispiel
Der folgende Code -Snippet legt die Breite, die Höhe des SVG -Rechtecks als 250, 100 und das Rechteck mit der grauen Farbe gefüllt.
Wir haben die Schlaganfallfarbe und die Schlaganfallbreite als Blau und 5 angegeben. Im Folgenden finden Sie die Ausgabe:
Wie man SVG abgerundetem Rechteck in HTML zeichnet
Wir müssen die RX -Attribute im Tag angeben, um abgerundete Ecken SVG -Rechteck zu zeichnen.
Beispiel
Lassen Sie uns das vorherige Beispiel ein wenig erweitern und den Wert von RX als 10px festlegen, um die abgerundeten Ecken des SVG -Rechtecks zu zeichnen:
Der obige Codesausschnitt zeigt die folgende Ausgabe an:
Wie man SVG Polygon in HTML zeichnet
HTML bietet ein Tag zum Zeichnen einer Form mit mindestens 3 Seiten. Ein Attribut mit dem Namen "Punkte" kann verwendet werden, um die X-Achse und die Y-Achse aller Seiten anzugeben.
Beispiel
Betrachten wir den folgenden Code-Snippet, um zu verstehen, wie die X-Achse und die Y-Achse einer Form festgelegt werden können:
Tag kann verwendet werden, um verschiedene Formen wie ein SVG -Stern oder eine andere geschlossene Form zu zeichnen.
Wie man SVG Eclipse HTML zeichnet
Tag wird verwendet, um eine Sonnenfinsternisform zu zeichnen, es ist dem Kreis sehr ähnlich. Der SVG -Kreis hat einen gleichen horizontalen und vertikalen Radius, aber in der Sonnenfinsternis unterscheidet sich der horizontale und vertikale Radius voneinander.
Beispiel
Das untergegebene Snippet zeigt, wie man eine Sonnenfinsternis in HTML zeichnet, wo rx = "150" ist der horizontale Radius und ry = "75" ist der vertikale Radius der Sonnenfinsternis:
Das obige Code -Snippet zeigt das folgende Ergebnis:
Der blau gefärbte Rand/Hub und grau gefüllte Sonnenfinsternis verifizierten, dass das Tag richtig funktioniert hat.
Abschluss
Diese Beschreibung hat gezeigt, wie grundlegende SVG-Bilder in HTML zeichnen können. Innerhalb des Tags können verschiedene Tags verwendet werden, um verschiedene SVG -Bilder wie zu zeichnen, und Tags können verwendet werden, um die SVG -Linien, Kreise, Rechtecke, Polygone und Eclipse -Form zu zeichnen. Innerhalb dieser Tags können verschiedene Attribute wie Schlaganfall und Schlaganfallbreite verwendet werden, um den Rand der Form und die Breite der Form festzulegen.