Puis-je changer la couleur de remplissage d’un chemin SVG avec CSS ?

Coloration dynamique des chemins SVG avec CSS

Puis-je changer la couleur de remplissage d'un chemin SVG avec CSS ?

Envisagez le code SVG suivant :

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
  <desc></desc>
  <defs></defs>
  <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>

Est-il possible de modifier la couleur de remplissage du chemin SVG en utilisant CSS ou toute autre méthode sans la changer explicitement dans le tag?

Réponse :

Oui, il est possible de styliser les éléments SVG en utilisant CSS. Cependant, vous devez cibler l'élément comme vous le feriez pour styliser du HTML. Pour appliquer le style à tous les chemins SVG, par exemple :

path {
  fill: blue;
}

Le CSS externe a tendance à remplacer l'attribut de remplissage du chemin dans les navigateurs comme WebKit et Gecko. Cependant, il est important de noter que si vous spécifiez une couleur de remplissage directement dans le champ (par exemple, ), elle remplacera tout style CSS externe.

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!