Les SVG en ligne peuvent-ils être intégrés directement dans les styles CSS ?

SVG en ligne en CSS : intégration de graphiques vectoriels dans les styles

Pouvons-nous intégrer des images SVG directement dans les styles CSS ? Imaginez utiliser la syntaxe suivante :

.my-class {
  background-image: <svg>...</svg>;
}

Réponse :

Oui, il est en effet possible d'utiliser des définitions SVG en ligne en CSS. Voici comment y parvenir :

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

Ce code crée une image SVG codée en URL et l'utilise comme image d'arrière-plan pour le élément. Le SVG se compose d'un dégradé linéaire et d'un rectangle qui remplit toute la fenêtre.

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!