Fichiers html, css et svg

**mafooley** · 19/09/2023, 02h16

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+

**NoSmoking** · 19/09/2023, 18h58

Bonjour,
ton image SVG en tant que source d'un élément <img> est non modifiable, c'est considéré comme une « bitmap ».

Si tu veux pouvoir modifier certaines zones, au survol par exemple, il te faut le faire dans le CSS de ton fichier SVG puis l'intégrer dans ta page dans un élément <object>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<object type="image/svg+xml" data="ton-image-svg.svg"></object>

mais je souhaiterai resté avec des fichiers distincts

mais pourquoi tant de haine

, si c'est pour des icones tu peux également te servir d'un élément <use> qui te permettes d'écrire des trucs comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<svg class="svg-icon"><use href="#ico-previous"></svg>

**mafooley** · 24/09/2023, 22h19

Super je vais essayer ça. Merci beaucoup !

Fichiers html, css et svg

CSS

Vue hybride

Discussions similaires

Partager

Partager