Bonjour tous,
je bute sur un problème malgré mes différentes recherches sur le net.
J'ai pour un petit projet un fichier index.html, un fichier style.css et une icone test.svg (téléchargée sur la toile)

Dans mon fichier html, j'ai un code qui ressemble à ça (je l'ai simplifié pour l'exemple) :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <img src="test.svg"></img>
  </div>
</body>

Mon icone affiche :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M344.578 493.54l-117.214-2.024L118.9 33..........."/>
</svg>
(les .......... sont juste là pour raccourcir le code )

J'aimerai maintenant changer les propriétés de mon icone via du CSS. Dans mon fichier svg j'ai donc rajouter, dans la balise path une class :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path class="mon_icone" d="M344.578 493.54l-117.214-2.024L118.9 33..........."/>
</svg>

et dans mon fichier CSS j'ai mis ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
.svg .mon_icone {
  fill: white;
  width: 60px;
}
.svg .mon_icone:hover {
  fill: red;
}
mais rien ne fonctionne. J'ai aussi essayé de mettre l'appel de la class dans le HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<img src="test.svg" class="mon_icone"></img>

J'ai vu des tuto avec la copie du code SVG directement dans le html ou la modification directe des propriétés de l'icone directement dans le fichier SVG mais je souhaiterai resté avec des fichiers distincts

Merci d'avance.

a+