Bei der Entwicklung von Webanwendungen werden SVG-Bilder verwendet. Zusammenfassend gibt es vier Möglichkeiten:
1. Direkt in die Seite einfügen. 2. Einführung des img-Tags. 3. CSS-Einführung. 4. Das Objekt-Tag wird eingeführt.
In HTML-Seiten können Sie SVG-Tags direkt verwenden.
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8"> <title></title> </head> <Körper> <!-- Ein SVG-Bild--> <svg width="200" height="150" style="border: 1px solid steelblue"> <!-- Darin befindet sich ein Rechteck --> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> </body> </html>
Betriebseffekt:
Zusätzlich zum direkten Schreiben von SVG-Tags in die Webseite können Sie diese auch über img importieren, genau wie beim Importieren von JPEG- und PNG-Bildern.
1) Erstellen Sie ein neues SVG-Bild
Dann müssen wir zuerst eine neue SVG-Bilddatei erstellen und die direkt auf der Webseite oben geschriebene SVG-Datei verwenden:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg>
Inhaltlich gibt es hier zwei Unterschiede:
1. Sie müssen das Namespace-Attribut xmlns deklarieren. Der Namespace kann in den Referenzmaterialien am Ende dieses Artikels aufgeführt werden. 2. Der Stil, der ursprünglich auf dem SVG-Tag geschrieben war, wurde entfernt: style="border: 1px solid steelblue".
Speichern Sie den Inhalt in der Datei test.svg. Sie können versuchen, sie in einem Browser zu öffnen.
2) Importieren Sie mit dem img-Tag
Gehen Sie davon aus, dass sich test.svg und die Webseitendatei im selben Verzeichnis befinden:
<img src="test.svg" style="border: 1px solid steelblue" />
Ähnlich wie bei der Einführung von JPEG und PNG können Sie den Bildpfad direkt mit dem src-Attribut festlegen. Außerdem haben wir den ursprünglichen SVG-Stil in das img-Tag verschoben.
Der Laufeffekt ist der gleiche wie oben:
Es gibt viele SVG-Bilder im Internet. Sie können auf https://www.iconfont.cn verweisen, eine gute Icon-Website.
Die CSS-Einführung besteht darin, das Bild als Hintergrundbild einzuführen:
<style type="text/css">
.svg {
Breite: 200px;
Höhe: 150px;
Rand: 1px einfarbig stahlblau;
Hintergrundbild: url(test.svg); // Als Hintergrund importieren }
</style>
<div class="svg"></div>
Ähnlich wie beim Importieren von img benötigen Sie eine SVG-Datei und importieren diese dann mit den Attributdaten:
<object data="test.svg" style="border: 1px solid steelblue"></object>
Der Laufeffekt ist ähnlich wie oben, es gibt keine weitere Zuordnung.
Obwohl auch andere Tags wie Embed- und Iframe-Tags eingeführt werden können, wird deren Verwendung nicht empfohlen. Weitere Informationen finden Sie in den am Ende dieses Artikels aufgeführten Referenzen.
Namespace: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course
Einbettungs-Tag: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed
Iframe-Tag: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
Damit ist dieser Artikel über die 4 Möglichkeiten zum Einfügen von SVG-Bildern in HTML-Webseiten abgeschlossen. Weitere Informationen zum Einfügen von SVG-Bildern in HTML finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie lesen weiter unten Unterstützen Sie in Zukunft downcodes.com!