Comment puis-je intégrer des SVG dans des pseudo-éléments CSS ::before et ::after ?

Utilisation de SVG dans ::avant et ::après les pseudo-éléments

Il est souvent souhaité d'incorporer des images SVG en tant que contenu dans des pseudo-éléments ::avant et ::après. Bien que la version en texte brut ne fonctionne pas, il existe des solutions alternatives utilisant URL() ou URI de données en ligne.

Utilisation d'URL()

La première méthode consiste à référencer le URL du fichier SVG :

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

Utilisation des données URI

Une autre option consiste à encoder le SVG directement dans le CSS à l'aide de l'encodage URI de données :

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

Cette méthode vous permet d'intégrer l'image SVG directement dans le CSS, ce qui rend il est autonome.

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!