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>

<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 Thibaud1869 20 septembre 2017 à 16:50:53