Bonjour,

J'aimerai animer une image svg que j'ai créé.
C'est une représentation des communes de Toulouse, j'aimerai que, lorsque l'on passe la souris sur une commune, le fond de cette commune devienne ROUGE et que le texte devienne BLANC.

Jusque là tout va bien j'arrive à faire ces actions, mais afin d'être plus précis j'aimerai que les 2 actions se produisent en même temps : pour le moment je n'arrive à changer le fond que lorsque la souris est dessus, mais le texte reste NOIR, et lorsque la souris passe sur le texte celui-ci devient BLANC, mais le fond reprend sa couleur d'origine !

SOURIS SUR LE FOND : le fond devient rouge mais le texte reste noir

SOURIS SUR LE TEXTE : le fond reste beige, le texte devient blanc


J'aimerai donc avoir fond rouge + texte blanc en même temps quelque soit la position de la souris (tant qu'elle reste dans la case Jolimont bien entendu).


J'espère avoir été clair


[EDIT]
J'ai oublié un détail, le code que j'ai utilisé !!

Pour le fond :

- j'ai 2 calques créés sur Illustrator, un beige et un rouge.
  - Calque beige :

<path id="Jolimont" class="st1" d="M284.5,184.5l76-1l25,15l-9,32.6c-0.6,2.3-0.8,4.6-0.4,7l3.4,20.5l-8,10l-8-5l-8,4l-19-6l-23-1
        l-16-3l-4-4l-9,1l-5-8l1-16l7-15v-21L284.5,184.5z">
    <set attributeName="opacity" attributeType="XML" from="1" to="0" begin="mouseover" end="mouseout"/>
</path>

  - Calque rouge :

<path id="Jolimont_1_" class="st0" d="M284.5,184.5l76-1l25,15l-9,32.6c-0.6,2.3-0.8,4.6-0.4,7l3.4,20.5l-8,10l-8-5l-8,4l-19-6
        l-23-1l-16-3l-4-4l-9,1l-5-8l1-16l7-15v-21L284.5,184.5z"/>

Pour le texte :

- Calque noir :

<text transform="matrix(1 0 0 1 315.71 226)" class="st6 st10"><set attributeName="opacity" attributeType="XML" from="1" to="0" begin="mouseover" end="mouseout"/>Jolimont</text>

- Calque blanc

<text transform="matrix(1 0 0 1 315.71 226)" class="st8 st6 st10">Jolimont</text>

Merci à tous !

-
Edité par Lauloque 22 septembre 2017 à 14:01:50

Hello,

Possible de fournir ton code dans un fiddle / pen pour que ce soit plus pratique stp ?

C'est dommage de dupliquer ton code SVG comme ça. Tu pourrais faire des transitions de couleur en CSS très simplement. De plus ta syntaxe avec la balise set est super verbeuse, peu maintenable et carrément obsolète. Tout ceci rend ta carte bien plus lourde qu'elle ne devrait l'être.

La solution standard à ton problème c'est de grouper chaque texte avec sa zone géographique et d'appliquer les règles CSS en plaçant le pseudo-sélecteur :hover sur le groupe et pas sur les éléments text et path.

Bonjour.

Les retours à la ligne consécutifs et les tableaux vides prenaient de la place pour rien et gâchaient la lisibilité, je me suis donc permis de modifier le message initial du topic pour corriger ça.

-
Edité par Lauloque 22 septembre 2017 à 14:05:15