J'ai plusieurs graphiques SVG dont je voudrais modifier les couleurs via mes feuilles de style externes - pas directement dans chaque fichier SVG. Je ne mets pas les graphiques en ligne, mais je les stocke dans mon dossier d'images et je les pointe.
Je les ai implémentés de cette manière pour permettre aux info-bulles de fonctionner, et j'ai également enveloppé chacune dans une <a>
balise pour permettre un lien.
<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
Et voici le code du graphique SVG:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
J'ai mis ce qui suit dans mon fichier CSS externe (main.css):
.socIcon g {fill:red;}
Pourtant, cela n'a aucun effet sur le graphisme. J'ai également essayé .socIcon g path {} et .socIcon path {}.
Quelque chose ne va pas, peut-être que mon implémentation n'autorise pas les modifications CSS externes ou j'ai raté une étape? J'apprécierais vraiment votre aide! J'ai juste besoin de la possibilité de modifier les couleurs du graphique SVG via ma feuille de style externe, mais je ne peux pas perdre la fonction d'info-bulle et de lien. (Je pourrais peut-être vivre sans info-bulles.) Merci!
svg { fill:red; }
ou donnez à votre chemin un nom de classe. Par exemple, <path class="socIcon" d="M28.44 ..... />
cela devrait faire l'affaire.