Fichiers html, css et svg
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:
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:
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:
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:
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:
<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+
