Comment faire pour qu'une image SVG hérite des couleurs du document HTML ?

Question

J'ai un groupe d'images SVG que je veux intégrer dans une page HTML, qui est stylisée avec CSS.

Je veux pouvoir faire en sorte que la couleur des éléments du SVG soit héritée de l'attribut de couleur de l'élément HTML parent.

J'ai essayé de mettre style="stroke: none; fill: inherit" mais cela ne fonctionne pas.

Answer 1

HTML utilise la couleur alors que SVG utilise le remplissage et le trait. Vous pouvez faire en sorte que le remplissage ou le trait utilise la valeur de la propriété CSS color en utilisant la valeur currentColor par exemple fill="currentColor"

Answer 2

Vous pouvez utiliser fill="currentColor" .

<a href="#" style="color:red">
<svg fill="currentColor"> ...</svg>
</a>

Answer 3

Stroke="currentColor" ceci a fonctionné pour moi

Answer 4

Définir le fill: de l'ensemble du SVG comme currentColor dans le CSS :

svg {
  fill: currentColor;
}

Cela permet à l'ensemble du SVG d'hériter de la CSS normale. color: de l'élément qui l'entoure. Assurez-vous simplement que tous les éléments enfants SVG n'ont pas d'éléments de type fill défini.