Pouvez-vous styliser les images d’arrière-plan SVG avec CSS ?

Style des images d'arrière-plan SVG via CSS

Pouvez-vous styliser un SVG lorsqu'il est utilisé comme image d'arrière-plan en utilisant le même fichier CSS où il est défini comme l'arrière-plan ?

Bien que vous puissiez positionner, mettre à l'échelle et découper avec succès des images SVG (individuellement ou sous forme de sprites), styliser le SVG dans le même fichier CSS qui l'attribue comme image d'arrière-plan n'est pas réalisable.

Considérez le code pseudo-CSS suivant, qui vise à modifier la couleur d'une forme en fonction de la classe de son élément parent :

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

Cette approche , qui suppose que le SVG contient un chemin avec la classe "svg-pathclass", n'est pas réalisable.

La raison réside dans la nature des SVG et CSS. Un SVG est un document autonome qui peut être préparé dans un URI de données ou référencé en externe. Une fois utilisée comme image de fond dans un autre fichier, elle devient une image immuable qui ne peut être modifiée par 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!