Pouvez-vous directement styliser une image d’arrière-plan SVG avec CSS ?

Styliser une image d'arrière-plan SVG avec CSS

Pouvez-vous appliquer des styles CSS directement à une image SVG utilisée comme image d'arrière-plan ?

Bien que l'utilisation de SVG comme images d'arrière-plan soit courante, l'extension du style CSS au SVG lui-même n'est pas directement prise en charge. Le fichier SVG et le fichier CSS existent en tant qu'entités distinctes, ce qui limite les capacités de style en ligne.

Dans l'exemple CSS fourni :

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

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

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

La tentative consiste à modifier la couleur de remplissage d'un chemin à l'intérieur le SVG basé sur la classe de l'élément. Cependant, cela n'est pas réalisable car le SVG est rendu sous forme d'image et non sous forme de code en direct dans le fichier CSS.

Pour obtenir l'effet souhaité, vous devez prédéfinir les styles dans le fichier SVG lui-même ou accéder au fichier SVG. via JavaScript pour manipuler les couleurs de manière dynamique.

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!