Wie kann ich SVGs in CSS ::before und ::after Pseudoelemente einbetten?

Verwendung von SVGs in ::before und ::after Pseudo-Elementen

Oft ist es erwünscht, SVG-Bilder als Inhalt in Pseudoelemente einzubetten ::before und ::after. Während die Klartextversion nicht funktioniert, gibt es alternative Lösungen mit URL() oder Inline-Daten-URI.

Verwendung von URL()

Die erste Methode beinhaltet die Referenzierung URL der SVG-Datei:

#mydiv::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Verwenden von Daten URI

Eine weitere Option besteht darin, das SVG mithilfe der Daten-URI-Kodierung direkt in das CSS zu kodieren:

#mydiv::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

Mit dieser Methode können Sie das SVG-Bild direkt in das CSS einbetten und so erstellen es ist in sich geschlossen.

Das obige ist der detaillierte Inhalt vonWie kann ich SVGs in CSS ::before und ::after Pseudoelemente einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!