Wie kann ich SVG-Bilder mithilfe von Inline-Definitionen direkt in mein CSS einbetten?

Einbinden von Inline-SVG-Bildern in CSS

CSS bietet eine praktische Methode, um Scalable Vector Graphics (SVGs) mithilfe von Inline-Definitionen direkt in seine Codebasis zu integrieren . Mit dieser Technik können Entwickler SVG-Grafiken als Hintergrundbilder oder andere Designelemente einbetten.

Verwendung

Um ein Inline-SVG-Bild in CSS einzubetten, verwenden Sie die folgende Syntax:

/* Class with inline SVG background image */
.my-class {
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
      ...
    </svg>");
}

Beispiel

Bedenken Sie Folgendes Beispiel:

body {
    background-image: url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
        <linearGradient>

In diesem Beispiel erstellt eine Inline-SVG-Definition einen farbenfrohen Hintergrund mit Farbverlauf, der sich über die gesamte Seite erstreckt. Das Inline-SVG enthält einen linearGradient zum Definieren eines Farbverlaufs und ein mit dem Farbverlauf gefülltes Rechteck.

Das obige ist der detaillierte Inhalt vonWie kann ich SVG-Bilder mithilfe von Inline-Definitionen direkt in mein CSS einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!