Puis-je utiliser des images SVG comme contenu dans des pseudo-éléments CSS ?

Affichage du SVG en tant que contenu dans des pseudo-éléments

En CSS, les pseudo-éléments tels que ::before et ::after peuvent améliorer l'élément apparence en ajoutant du contenu avant ou après. Bien que le contenu textuel soit couramment utilisé, est-il possible d'afficher une image SVG en tant que contenu au sein de ces pseudo-éléments ?

Pour y parvenir, spécifiez l'URL de l'image SVG comme valeur de contenu pour le pseudo-élément. Par exemple :

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

Alternativement, vous pouvez intégrer le SVG directement dans le CSS en utilisant la syntaxe data:image/svg xml :

#test::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'>

Cette technique vous permet d'incorporer des SVG complexes graphiques dans vos pages Web en utilisant la puissance du CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!