Je cherche à remplacer une carte de France sur mon site qui est à la base une image comportant 2 cartes de France le titre et les légendes, par quelque chose de plus agréable à la vue, soit une carte de France SVG.
Je souhaite donc colorer les départements avec du CSS mais je bloque dessus.
Chaque département est constitué de 2 éléments path (contenu et bordure) contenus dans une balise <g> dont le nom de classe est le numéro et nom du département et les départements sont groupés en régions (les anciennes) avec des balises <g> dont la classe à le nom du département. Voici à quoi ressemble le SVG (je ne vous le met que partiellement):
l’ensemble des départements d’une région avec pour la première carte et pour la seconde :
#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur path /*PACA de la première carte*/
{
fill: red;
}
#demo_osteo_map_2012_2016 div:last-child .Provence-Alpes-Côte-dAzur path /*PACA de la deuxième carte*/
{
fill: red;
}
mais impossible de colorer individuellement un département. Aucune de ces propositions ne fonctionne :
#demo_osteo_map_2012_2016 div:first-child .05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
fill: red;
}
#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur .05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
fill: red;
}
#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur>.05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
fill: red;
}
Quelle est l'erreur ?
Merci pour l’aide que vous pourrez m’apporter.
EDIT :
Je viens de m'apercevoir de l'erreur en postant ce message :
Le forum me colore le numéro '05' mais pas le reste du nom de la classe, pas l'outil sur lequel je travaille... ça m'a mis la puce à l'oreille.
Effectivement, pas de chiffre accepté (j'en n'avais jamais utilisé auparavant), sans ça marche tout de suite mieux.
Tout simplement en utilisant le nom de ta class dans ta feuille de style exemple :
.83-var{ fill:lime; }
et pour les path
.83-var path{ fill:black; } normalement tu peux le faire directement dans le svg aussi.
comme ceci : path fill="#ED7218 pour les path et pour les groupes (g) fill="#ED7218" après le nom de la class, comme ceci : <g class="83-var" fill="blue" etc.>
dernière solution si tu aimes le graphisme, tu refais ta carte sous illustration et tu l'enregistre au format svg tu affiche le code à l'enregistrement, tu le copies et tu le colles dans ton site.
Colorer un SVG avec du CSS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
