mousover sur plusieurs éléments en même temps

**jean mich jean mich** · 12/02/2020, 10h38

Bonjour est t-il possible d'activer plusieurs events avec la fonction mousover sur plusieurs éléments en même temps.

J'aimerais dans mon cas :

- appliquer un on/out mousover sur chaque texte
- lorsque je survole le texte, il devient rouge et gras
- lorsque je ne suis plus dessus, il redevient à l'état initial

- appliquer un on/out mousover sur chaque circle
- lorsque je survole un circle, la couleur du stroke change
- lorsque je ne suis plus dessus, il redevient à l'état initial

- lorsque je survole un circle, , le circle change de couleur mais également le texte
- lorsque je survole un texte, le texte change de couleur mais également le circle
- chaque circle est lié à un texte en particulier

- j'aimerais également que du texte s'affiche (un bloc text), et ça pour chaque couple texte/circle, lorsque je survole soit le circle soit le texte

Merci beaucoup pour votre aide

Voici mon code :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=""width=device-width, initial-scale="1.0, maximum-scale=1.0, minimal-ui"/>
    <link rel="stylesheet" href="app.css">
</head>
<body>
 
<div class="map" id=""map">
<div class="map__image">
 
    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1"
         id="svg2" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.92.3 (2405546, 2018-03-11)" sodipodi:docname="RER_ligne_A_Paris_plan.svg" sodipodi:version="0.32" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2790 1075"
         style="enable-background:new 0 0 2790 1075;" xml:space="preserve">
<style type="text/css">
        .st0{fill:none;stroke:#000000;}
    .st1{fill:none;stroke:#E2231A;stroke-width:7.852;}
    .st2{stroke:#E2231A;stroke-width:7.852;}
    .st3{stroke:#000000;stroke-width:5;}
    .st4{font-family:'ArialMT';}
    .st5{font-size:31.4093px;}
    .st6{font-size:32px;}
    .st7{enable-background:new    ;}
    .st8{fill:#FFFFFF;}
    .st9{fill:#050D9E;}
    .st10{fill:#E2231A;}
    .st11{fill:none;}
    .st12{font-family:'Arial-BoldMT';}
    .st13{font-size:25.7578px;}
    .st14{font-size:48px;}
    .st15{stroke:#000000;stroke-width:5;}
    .st16{fill:#1D1D1B;stroke:#000000;stroke-width:5;}
</style>
        <sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" fit-margin-bottom="0" fit-margin-left="0" fit-margin-right="0" fit-margin-top="0" gridtolerance="10.0" guidetolerance="10.0" height="750px" id="base" inkscape:current-layer="layer4" inkscape:cx="1295.528" inkscape:cy="417.74082" inkscape:document-rotation="0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:snap-global="false" inkscape:window-height="1001" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:zoom="1.979899" objecttolerance="10.0" pagecolor="#ffffff" showgrid="false" showguides="false" width="2150px">
	<inkscape:grid  id="grid16215" type="xygrid"></inkscape:grid>
            <sodipodi:guide  id="guide5174" inkscape:locked="false" orientation="-0.70710678,0.70710678" position="893.07264,717.18316">
		</sodipodi:guide>
</sodipodi:namedview>
        <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
	<path id="path15678" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M603.6,273.8v-96.7"/>
            <path id="path15680" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M683.6,273.8v-96.7"/>
            <path id="path3787" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1803.6,350.5v-83.7
		c0.2-27.8,15.7-33.1,31.4-32.6h846.2"/>
            <path id="path16066" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st2" d="M1802.9,346.6h-719.3"/>
            <path id="path16070" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M2523.3,459h-686.2
		c-17.8,0.6-33.3-4.8-33.5-32.6v-83.7"/>
            <path id="path14566" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1079.7,350.5v-83.7
		c-0.2-27.8-15.7-33.1-31.4-32.6H763.6"/>
            <path id="path14568" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M522,459h524.2
		c17.8,0.6,33.3-4.8,33.5-32.6v-83.7"/>
            <path id="path14820" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M761.5,234.2v-3.7
		c-0.2-27.8-15.7-33.1-31.4-32.6H123.6"/>
            <path id="path14822" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M603.6,270.5H728
		c17.8,0.6,33.3-4.8,33.5-32.6v-3.7"/>
            <path id="circle15644_2_" class="st3" d="M203.6,210.4"/>
            <path id="circle15644_1_" class="st3" d="M203.6,185.4"/>
</g>
        <g id="layer3" transform="translate(-39.010047,646.2841)" inkscape:groupmode="layer" inkscape:label="names">
	<text transform="matrix(0.5 -0.866 0.866 0.5 1830.9004 -239.2476)" class="st4 st5">Val de Fontenay</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1189.6523 -124.9918)" class="st4 st5">La Défense</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1270.4849 -125.774)" class="st4 st5">Charles de Gaulle - Étoile</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1351.0002 -127.0504)" class="st4 st5">Auber</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1430.4927 -125.7877)" class="st4 st5">Châtelet - Les Halles</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1510.439 -125.6949)" class="st4 st5">Gare de Lyon</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1794.457 283.1879)" class="st4 st5">Nogent-sur-Marne</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1890.5627 258.183)" class="st4 st5">Joinville-le-Pont</text>
            <g id="g5150" transform="translate(495.28024,-126.65523)">
		<text transform="matrix(0.5 -0.866 0.866 0.5 1451.2679 427.0092)" class="st4 st5">Saint-Maur - Créteil</text>
	</g>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2069.8579 -237.441)" class="st4 st5">Noisy-le-Grand - Mont-d&apos;Est</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1989.7773 -237.3013)" class="st4 st5">Bry-sur-Marne</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1909.7852 -237.315)" class="st4 st5">Neuilly-Plaisance</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2004.2559 336.0502)" class="st4 st5">Le Parc de Saint-Maur</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2156.4839 200.849)" class="st4 st5">Champigny</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2110.0483 420.7279)" class="st4 st6">La Varenne - Chennevières</text>
            <g id="g5158" transform="translate(530.58963,-42.930517)">
		<text transform="matrix(0.5 -0.866 0.866 0.5 1807.4622 354.9134)" class="st4 st5">Boissy-Saint-Léger</text>
	</g>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2292.5286 255.1821)" class="st4 st5">Sucy - Bonneuil</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1589.7849 -124.9449)" class="st4 st5">Nation</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1670.9465 -126.9576)" class="st4 st5">Vincennes</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1109.8462 -125.0513)" class="st4 st5">Nanterre-Préfecture</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2149.689 -237.3219)" class="st4 st5">Noisy - Champs</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2229.7078 -237.3551)" class="st4 st5">Noisiel</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2309.7192 -237.3746)" class="st4 st5">Lognes</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2469.6848 -237.315)" class="st4 st5">Bussy-Saint-Georges</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2390.5244 -238.7691)" class="st4 st5">Torcy</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2567.7195 -227.1256)" class="st4 st5">Val d&apos;Europe</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 2635.8074 -237.5279)" class="st4 st5">Marne-la-Vallée - Chessy</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 1702.1382 304.5258)" class="st4 st5">Fontenay-sous-Bois</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 949.689 -237.149)" class="st4 st5">Houilles - Carrières-sur-Seine</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 870.5923 -238.3306)" class="st4 st5">Sartrouville</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 789.7735 -237.2955)" class="st4 st5">Maisons-Laffitte</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 825.7271 301.2846)" class="st4 st5">Nanterre-Université</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 786.1238 228.3403)" class="st4 st5">Nanterre-Ville</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 677.8245 277.9086)" class="st4 st5">Rueil-Malmaison</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 607.7357 250.643)" class="st4 st5">Chatou-Croissy</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 515.2818 281.7602)" class="st4 st5">Le Vésinet-Centre</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 404.3663 326.5668)" class="st4 st5">Le Vésinet - Le Pecq</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 297.7354 355.3881)" class="st4 st5">Saint-Germain-en-Laye</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 630.962 -275.6871)" class="st4 st5">Achères-Grand-Cormier</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 549.8426 -273.7477)" class="st4 st5">Poissy</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 471.0347 -275.8131)" class="st4 st5">Achères-Ville</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 390.5118 -274.524)" class="st4 st5">Conflans-Fin-d&apos;Oise</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 309.8004 -273.6744)" class="st4 st5">Neuville-Université</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 230.481 -274.4703)" class="st4 st5">Cergy-Préfecture</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 150.4888 -274.484)" class="st4 st5">Cergy-Saint-Christophe</text>
            <text transform="matrix(0.5 -0.866 0.866 0.5 70.5694 -274.6236)" class="st4 st5">Cergy-le-Haut</text>
</g>
        <g id="layer1" transform="translate(0,307.09595)" inkscape:groupmode="layer" inkscape:label="logo" sodipodi:insensitive="true">
	<g id="g13376" transform="translate(-21.330339,-1405.8168)" class="st7">
		<g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
			<circle id="circle6196" class="st8" cx="1159.9" cy="658.1" r="16"/>
            <path id="path6198" inkscape:connector-curvature="0" class="st9" d="M1177.4,658.2c0-9.7-8.1-17.6-17.5-17.6
				c-9.7,0-17.5,7.9-17.5,17.6c0,9.6,7.9,17.4,17.5,17.4C1169.6,675.6,1177.4,667.8,1177.4,658.2 M1175,658.2c0,8.2-6.8,15-15,15
				c-8.3,0-15.1-6.7-15.1-15c0-8.4,6.8-15.2,15.1-15.2C1168.2,642.9,1175,649.9,1175,658.2z M1172.5,655.4c0-2.4-1.8-3.5-3.5-3.5
				h-3.3c-0.6,0-1,0.5-1,1v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5
				c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9C1171.5,658.2,1172.5,657.2,1172.5,655.4L1172.5,655.4z M1163.6,663c0-0.5-0.4-1.1-1-1.1h-3.3v-3
				h2.8c0.6,0,1-0.5,1-1c0-0.5-0.3-1-1-1h-2.8v-2.8h3.1c0.6,0,1-0.6,1-1.1c0-0.5-0.4-1.1-1-1.1h-4.5c-0.6,0-1,0.5-1,1v10.2
				c0,0.6,0.6,0.9,1.2,0.9h4.5C1163.2,664.1,1163.6,663.5,1163.6,663z M1155.5,655.4c0-2.4-1.7-3.5-3.5-3.5h-3.3c-0.6,0-1,0.5-1,1
				v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9
				C1154.6,658.2,1155.5,657.2,1155.5,655.4L1155.5,655.4z M1170,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
				C1169.1,653.9,1170,654.4,1170,655.6z M1153.1,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
				C1152.1,653.9,1153.1,654.4,1153.1,655.6z"/>
		</g>
        <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
			<path id="path6202" inkscape:connector-curvature="0" class="st10" d="M94.4,547.2c0-9.7-7.8-17.5-17.5-17.5
				c-9.7,0-17.5,7.8-17.5,17.5c0,9.7,7.8,17.5,17.5,17.5C86.6,564.7,94.4,556.8,94.4,547.2"/>
            <path id="path6204" inkscape:connector-curvature="0" class="st8" d="M92,547.2c0-8.3-6.7-15-15-15.1c-8.3,0-15.1,6.7-15,15
				c0,8.3,6.7,15.1,15,15.1C85.2,562.2,92,555.5,92,547.2"/>
            <path id="path6206" inkscape:connector-curvature="0" class="st10" d="M68.8,554.7l4,0l1.1-3.2H80l1,3.2l3.6,0l-5.9-16.8h-4
				L68.8,554.7 M74.7,548.7l1.7-5.3c0.2-0.7,0.4-1.6,0.4-2.1l0.1,0c0,0.6,0.2,1.4,0.4,2.1l1.7,5.3L74.7,548.7L74.7,548.7z"/>
		</g>
	</g>
</g>
        <path id="circle15644_5_" class="st3" d="M440,405.6"/>
        <g id="g6200_1_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
	<path id="path6202_1_" inkscape:connector-curvature="0" class="st10" d="M162.8,347.6c0-5.7-4.6-10.3-10.3-10.3
		c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C158.2,357.9,162.8,353.3,162.8,347.6"/>
            <path id="path6204_1_" inkscape:connector-curvature="0" class="st8" d="M161.4,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
		c0,4.9,4,8.9,8.9,8.9C157.4,356.5,161.4,352.5,161.4,347.6"/>
</g>
        <rect x="331.6" y="656.1" class="st11" width="35" height="22.3"/>
        <text transform="matrix(1 0 0 1 331.5508 674.4961)" class="st10 st12 st13">A1</text>
        <g id="g6200_2_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
	<path id="path6202_2_" inkscape:connector-curvature="0" class="st10" d="M1052.3,347.6c0-5.7-4.6-10.3-10.3-10.3
		c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1047.6,357.9,1052.3,353.3,1052.3,347.6"/>
            <path id="path6204_2_" inkscape:connector-curvature="0" class="st8" d="M1050.8,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
		c0,4.9,4,8.9,8.9,8.9C1046.8,356.5,1050.8,352.5,1050.8,347.6"/>
</g>
        <rect x="2491" y="655.5" class="st11" width="35" height="22.3"/>
        <text transform="matrix(1 0 0 1 2490.9873 673.9199)" class="st10 st12 st13">A2</text>
        <g id="g6200_3_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
	<path id="path6202_3_" inkscape:connector-curvature="0" class="st10" d="M1118.1,255.1c0-5.7-4.6-10.3-10.3-10.3
		c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1113.5,265.4,1118.1,260.8,1118.1,255.1"/>
            <path id="path6204_3_" inkscape:connector-curvature="0" class="st8" d="M1116.7,255.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
		c0,4.9,4,8.9,8.9,8.9C1112.7,264,1116.7,260,1116.7,255.1"/>
</g>
        <rect x="2651" y="430.7" class="st11" width="35" height="22.3"/>
        <text transform="matrix(1 0 0 1 2650.9863 449.1826)" class="st10 st12 st13">A4</text>
        <rect x="1059.7" y="664" class="st11" width="555.8" height="115.6"/>
        <text transform="matrix(1 0 0 1 1134.9717 698.335)"><tspan x="0" y="0" class="st12 st14">Migration Ligne A </tspan><tspan x="111.9" y="57.6" class="st12 st14">Phase 1</tspan></text>
        <circle id="saint_germain_en_laye" class="st4 st5 st15" cx="427.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="le_vesinet_le_pecq" class="st15" cx="507.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="le_vesinet_centre" class="st15" cx="587.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="chatou_croissy" class="st15" cx="667.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="rueil_malmaison" class="st15" cx="747.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="nanterre_ville" class="st15" cx="827.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="nanterre_universite" class="st15" cx="907.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="nanterre_prefecture" class="st15" cx="1067.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="la_defense" class="st15" cx="1147.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="charles_de_gaulle_etoile" class="st15" cx="1227.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="auber" class="st15" cx="1307.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="chatelet_les_halles" class="st15" cx="1387.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="gare_de_lyon" class="st15" cx="1467.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="nation" class="st15" cx="1547.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="vincennes" class="st15" cx="1627.5" cy="554.3" r="12.5" fill="white"/>
        <circle id="val_de_fontenay" class="st15" cx="1787.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="neuilly_plaisance" class="st15" cx="1867.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="bry_sur_marne" class="st15" cx="1947.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="noisy_le_grand_mont_d_est" class="st15" cx="2027.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="noisy_champs" class="st15" cx="2107.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="noisiel" class="st15" cx="2187.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="lognes" class="st15" cx="2267.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="torcy" class="st15" cx="2347.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="bussy_saint_georges" class="st15" cx="2427.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="val_d_europe" class="st15" cx="2507.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="marne_la_vallee_chessy" class="st15" cx="2587.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="fontenay_sous_bois" class="st15" cx="1787.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="nogent_sur_marne" class="st15" cx="1867.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="joinville_le_pont" class="st15" cx="1947.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="saint_maur_creteil" class="st15" cx="2027.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="le_parc_de_saint_maur" class="st15" cx="2107.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="champigny" class="st15" cx="2187.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="la_varenne_chennevieres" class="st15" cx="2267.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="sucy_bonneuil" class="st15" cx="2347.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="boissy_saint_leger" class="st15" cx="2427.5" cy="666.6" r="12.5" fill="white"/>
        <circle id="cergy_le_haut" class="st16" cx="27.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="cergy_saint_christophe" class="st16" cx="107.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="cergy_prefecture" class="st16" cx="187.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="neuville_universite" class="st16" cx="267.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="conflans_fin_d_oise" class="st16" cx="347.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="acheres_ville" class="st16" cx="427.5" cy="405.6" r="12.5" fill="white"/>
        <circle id="poissy" class="st16" cx="507.5" cy="478.2" r="12.5" fill="white"/>
        <circle id="acheres_grand_cornier" class="st16" cx="587.5" cy="478.2" r="12.5" fill="white"/>
        <circle id="maison_laffitte" class="st16" cx="747.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="sartrouville" class="st16" cx="827.5" cy="441.9" r="12.5" fill="white"/>
        <circle id="houilles_carrieres_sur_seine" class="st16" cx="907.5" cy="441.9" r="12.5" fill="white"/>
</svg>
</div>
        <div class=""map__list">
 
</div>
</div>
</body>
</html>

**SpaceFrog** · 12/02/2020, 13h13

java ?

Invité · 12/02/2020, 14h13

Bonjour,

ici, c'est le forum JavaScript (à ne pas confondre avec Java).

Envoyé par jean mich jean mich

- appliquer un on/out mousover sur chaque texte
- lorsque je survole le texte, il devient rouge et gras
- lorsque je ne suis plus dessus, il redevient à l'état initial

Code css :

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

1
2
3
4
text.text-over {
  font-weight:bold;
  fill:red;
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
const texts = document.querySelectorAll('svg text[class*="st"]');
texts.forEach(function(text){
  // console.log( text.textContent );
  text.addEventListener('mouseover', function(){
    this.classList.add('text-over');
  });
  text.addEventListener('mouseout', function(){
    this.classList.remove('text-over');
  });
})

- appliquer un on/out mousover sur chaque circle
- lorsque je survole un circle, la couleur du stroke change
- lorsque je ne suis plus dessus, il redevient à l'état initial

Code css :

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

1
2
3
4
5
6
circle.circle-over {
  font-weight:bold;
  fill:red;
  stroke:red;
  stroke-width:5;
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
const circles = document.querySelectorAll('svg circle[class*="st"]');
circles.forEach(function(circle){
  // console.log( circle.circleContent );
  circle.addEventListener('mouseover', function(){
    this.classList.add('circle-over');
  });
  circle.addEventListener('mouseout', function(){
    this.classList.remove('circle-over');
  });
})

- lorsque je survole un circle, , le circle change de couleur mais également le texte
- lorsque je survole un texte, le texte change de couleur mais également le circle
- chaque circle est lié à un texte en particulier

Là, en l'état actuel du code, ce n'est pas possible, car il n'y a pas de "liaison" entre le texte et le circle associé.

Une solution :

Pour les <circle>, remplacer tous les <circle id="xxxxxxx"...> par <circle id="circ_xxxxxxx"....
pour les <text>, ajouter <text id="text_xxxxxxx"... (avec les mêmes identifiants de ville que chaque circle)

ex. :

Code :

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

1
2
<text id="text_saint_germain_en_laye" .....>
<circle id="circ_saint_germain_en_laye" .....>

On peut alors écrire :

Code css :

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

1
2
3
4
5
6
7
8
9
10
text.text-over {
  font-weight:bold;
  fill:red;
}
circle.circle-over {
  font-weight:bold;
  fill:red;
  stroke:red;
  stroke-width:5;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"use strict";
/* texts */
const texts = document.querySelectorAll('svg text[class*="st"]');
texts.forEach(function(text){
  text.addEventListener('mouseover', function(){
    this.classList.add('text-over');
    if( this.id != '' ){
      let circle_id = this.id.replace('text_','circ_');
      if(document.getElementById(circle_id)!=null) document.getElementById(circle_id).classList.add('circle-over');
    }
  });
  text.addEventListener('mouseout', function(){
    this.classList.remove('text-over');
    if( this.id != '' ){
      let circle_id = this.id.replace('text_','circ_');
      if(document.getElementById(circle_id)!=null) document.getElementById(circle_id).classList.remove('circle-over');
    }
  });
})
/* circles */
const circles = document.querySelectorAll('svg circle');
circles.forEach(function(circle){
  circle.addEventListener('mouseover', function(){
    this.classList.add('circle-over');
    if( this.id != '' ){
      let text_id = this.id.replace('circ_','text_');
      if(document.getElementById(text_id)!=null) document.getElementById(text_id).classList.add('text-over');
    }
  });
  circle.addEventListener('mouseout', function(){
    this.classList.remove('circle-over');
    if( this.id != '' ){
      let text_id = this.id.replace('circ_','text_');
      if(document.getElementById(text_id)!=null) document.getElementById(text_id).classList.remove('text-over');
    }
  });
})

**NoSmoking** · 12/02/2020, 18h05

Bonjour,
typiquement pour

- lorsque je survole un circle, , le circle change de couleur mais également le texte
- lorsque je survole un texte, le texte change de couleur mais également le circle
- chaque circle est lié à un texte en particulier

il existe l'élément <g> pour grouper des objets et dans ce cas le CSS est suffisant

Code html :

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

1
2
3
4
<g>
  <circle />
  <text></text>
</g>

Invité · 12/02/2020, 18h22

Envoyé par NoSmoking

il existe l'élément <g> pour grouper des objets...

Nom : homer.png
Affichages : 132
Taille : 8,3 Ko

"DOH !!"

Ça ne m'est même pas venu à l'idée !
Ni de tester simplement :hover en CSS !

N.B. J'ai fait avec "ce qu'on m'a donné"...
(à ma décharge, je ne connais pas trop la création de <svg>)

**jean mich jean mich** · 13/02/2020, 09h44

Merci beaucoup à tous !

En effet Javascript ! Vous avez bien fait de me tacler

Le fait d'écrire en CSS avec <g> ne va pas créer de problème ? Car "text" et "circle" ont des propriétés différentes ?

- appliquer un on/out mousover sur chaque texte : OK
- lorsque je survole le texte, il devient rouge et gras : OK
- lorsque je ne suis plus dessus, il redevient à l'état initial : OK

- appliquer un on/out mousover sur chaque circle : OK
- lorsque je survole un circle, la couleur du stroke change : OK
- lorsque je ne suis plus dessus, il redevient à l'état initial : OK

- lorsque je survole un circle, , le circle change de couleur mais également le texte : OK
- lorsque je survole un texte, le texte change de couleur mais également le circle : OK
- chaque circle est lié à un texte en particulier : OK

- j'aimerais également que du texte s'affiche (un bloc text, avec la possibilité de choisir sa position sur la page), et ça pour chaque couple texte/circle, lorsque je survole soit le circle soit le texte : Pas encore trouvé

Avez-vous une idée de comment faire ?

Invité · 13/02/2020, 10h24

Bonjour,

commence par mettre de l'ordre dans ton code, tout est en vrac :

balise <style> à mettre dans le <head>,
<?xml version="1.0" encoding="utf-8"?> à supprimer,
<div ... id=""map"> : fautes de frappe,
indentation (pour y voir clair),
groupement des <text> / <circle> associés *
...

* [EDIT] Je viens d'essayer....
Le problème est que les textes sont déjà dans des <g>, avec des coordonnées de déplacement : <g id="aaaa" transform="translate(xxx,yyy)">.
grouper le <circle> dedans va le déplacer aussi...

Finalement... ma solution JavaScript avec des id "text_..." et "circ_..." n'est pas si ridicule que ça...

Invité · 13/02/2020, 18h17

Envoyé par jean mich jean mich

[B]j'aimerais également que du texte s'affiche (un bloc text, avec la possibilité de choisir sa position sur la page)

1- J'ai essayé avec la pseudo-classe ::before sur les <g>, mais ça ne semble pas fonctionner.

2- Donc, je me suis rabattu sur un <text> supplémentaire, ajouté dans chaque <g> :

masqué par défaut
afficher au survol

N.B. Pour éviter toute confusion :

les id="nom_de_la_ville" (qui ne servent à rien, à priori, d'autant qu'un attribut id DOIT ETRE UNIQUE), ont été supprimés.
j'ai mis <g class="ville">.

ex. :

Code html :

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

1
2
3
4
5
6
          <!--gare de Saint Germain en laye-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 400 975)" class="st4 st5">Saint-Germain-en-Laye</text>
            <circle class="st15" cx="543.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Saint-Germain-en-Laye</text>
          </g>

Avec le CSS (commun) :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* villes : text et circle au survol */
svg g.ville{
  cursor:pointer;
}
svg g.ville:hover > text:not(.desc) {
  font-weight:bold;
  fill:red;
}
svg g.ville:hover > circle {
  font-weight:bold;
  fill:red;
  stroke:red;
  stroke-width:20;
}
/* description */
svg g.ville > text.desc {
  font-size:36px;
  fill:green;
  display:none; /* on masque */
}
svg g.ville:hover > text.desc {
  display:block; /* on affiche */
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="" width=device-width, initial-scale="1.0, maximum-scale=1.0, minimal-ui"/>
    <link rel="stylesheet" href="app.css">
    <style type="text/css">
      .st0{fill:none;stroke:#000000;}
      .st1{fill:none;stroke:#E2231A;stroke-width:7.852;}
      .st2{stroke:#E2231A;stroke-width:7.852;}
      .st3{stroke:#000000;stroke-width:5;}
      .st4{font-family:'ArialMT';}
      .st5{font-size:31.4093px;}
      .st6{font-size:32px;}
      .st7{enable-background:new;}
      .st8{fill:#FFFFFF;}
      .st9{fill:#050D9E;}
      .st10{fill:#E2231A;}
      .st11{fill:none;}
      .st12{font-family:'Arial-BoldMT';}
      .st13{font-size:25.7578px;}
      .st14{font-size:48px;}
      .st15{fill:#FFFFFF;stroke:#000000;stroke-width:5;}
      .st16{fill:#1D1D1B;stroke:#000000;stroke-width:5;}
    </style>
  </head>
  <body>
 
    <div class="map" id="map">
      <div class="map__image">
 
        <svg version="1.1"
             id="svg2" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.92.3 (2405546, 2018-03-11)" sodipodi:docname="RER_ligne_A_Paris_plan.svg" sodipodi:version="0.32" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2938.7 1075"
             style="enable-background:new 0 0 2938.7 1075;" xml:space="preserve">
          <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
            <path id="path15678" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M719.8,273.8v-96.7"/>
            <path id="path15680" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st0" d="M799.8,273.8v-96.7"/>
            <path id="path3787" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1919.8,350.5v-83.7 c0.2-27.8,15.7-33.1,31.4-32.6h846.2"/>
            <path id="path16066" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st2" d="M1919.1,346.6h-719.3"/>
            <path id="path16070" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M2639.5,459h-686.2 c-17.8,0.6-33.3-4.8-33.5-32.6v-83.7"/>
            <path id="path14566" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M1195.8,350.5v-83.7 c-0.2-27.8-15.7-33.1-31.4-32.6H879.8"/>
            <path id="path14568" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M638.1,459h524.2 c17.8,0.6,33.3-4.8,33.5-32.6v-83.7"/>
            <path id="path14820" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M877.6,234.2v-3.7 c-0.2-27.8-15.7-33.1-31.4-32.6H239.8"/>
            <path id="path14822" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st1" d="M719.8,270.5h124.4 c17.8,0.6,33.3-4.8,33.5-32.6v-3.7"/>
            <path id="circle15644_2_" class="st3" d="M319.8,210.4"/>
            <path id="circle15644_1_" class="st3" d="M319.8,185.4"/>
          </g>
 
          <!--branche A1-->
          <!--gare de Saint Germain en laye-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 400 975)" class="st4 st5">Saint-Germain-en-Laye</text>
            <circle class="st15" cx="543.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Saint-Germain-en-Laye</text>
          </g>
 
          <!--gare de Vésinet-Le Pecq-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 495 945)" class="st4 st5">Le Vésinet - Le Pecq</text>
            <circle class="st15" cx="623.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Le Vésinet - Le Pecq</text>
          </g>
 
          <!--gare de Vésinet-Centre-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 590 915)" class="st4 st5">Le Vésinet-Centre</text>
            <circle class="st15" cx="703.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Le Vésinet-Centre</text>
          </g>
 
          <!--gare de Chatou-Croissy-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 685 890)" class="st4 st5">Chatou-Croissy</text>
            <circle class="st15" cx="783.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Chatou-Croissy</text>
          </g>
 
          <!--gare de Rueil-Malmaison-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 760 910)" class="st4 st5">Rueil-Malmaison</text>
            <circle class="st15" cx="863.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Rueil-Malmaison</text>
          </g>
 
          <!--gare de Nanterre-Ville-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 860 875)" class="st4 st5">Nanterre-Ville</text>
            <circle class="st15" cx="943.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Nanterre-Ville</text>
          </g>
 
          <!--gare de Nanterre-Université-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 905 935)" class="st4 st5">Nanterre-Université</text>
            <circle class="st15" cx="1023.6" cy="666.6" r="12.5"/>
            <text class="desc" x="250" y="1050">Gare de Nanterre-Université</text>
          </g>
 
          <!--branche A2-->
          <!--gare de Fontenay-sous-Bois-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1785 935)" class="st4 st5">Fontenay-sous-Bois</text>
            <circle class="st15" cx="1903.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Fontenay-sous-Bois</text>
          </g>
 
          <!--gare de Nogent-sur-Marne-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1875 920)" class="st4 st5">Nogent-sur-Marne</text>
            <circle class="st15" cx="1983.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Nogent-sur-Marne</text>
          </g>
 
          <!--gare de Joinville-le-Pont-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1970 900)" class="st4 st5">Joinville-le-Pont</text>
            <circle class="st15" cx="2063.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Joinville-le-Pont</text>
          </g>
 
          <!--gare de Saint-Maur-Créteil-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2030 940)" class="st4 st5">Saint-Maur - Créteil</text>
            <circle class="st15" cx="2143.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Saint-Maur - Créteil</text>
          </g>
 
          <!--gare de Le Parc de Saint-Maur-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2100 965)" class="st4 st5">Le Parc de Saint-Maur</text>
            <circle class="st15" cx="2223.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Le Parc de Saint-Maur</text>
          </g>
 
          <!--gare de Champigny-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2240 845)" class="st4 st5">Champigny</text>
            <circle class="st15" cx="2303.6" cy="666.6" r="12.5"/>
             <text class="desc" x="1850" y="1050">Gare de Champigny</text>
         </g>
 
          <!--gare de La Varenne-Chennevières-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2220 1015)" class="st4 st6">La Varenne - Chennevières</text>
            <circle class="st15" cx="2383.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de La Varenne - Chennevières</text>
          </g>
 
          <!--gare de Sucy-Bonneuil-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2370 895)" class="st4 st5">Sucy - Bonneuil</text>
            <circle class="st15" cx="2463.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Sucy - Bonneuil</text>
          </g>
 
          <!--gare de Boissy-Saint-Léger-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2430 930)" class="st4 st5">Boissy-Saint-Léger</text>
            <circle class="st15" cx="2543.6" cy="666.6" r="12.5"/>
            <text class="desc" x="1850" y="1050">Gare de Boissy-Saint-Léger</text>
          </g>
 
          <!--branche A3-->
          <!--gare de Cergy-le-Haut-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 147 370)" class="st4 st5">Cergy-le-Haut</text>
            <circle class="st16" cx="143.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Cergy-le-Haut</text>
          </g>
 
          <!--gare de Cergy-Saint-Christophe-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 232 370)" class="st4 st5">Cergy-Saint-Christophe</text>
            <circle class="st16" cx="223.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Cergy-Saint-Christophe</text>
          </g>
 
          <!--gare de Cergy-Préfecture-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 317 370)" class="st4 st5">Cergy-Préfecture</text>
            <circle class="st16" cx="303.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Cergy-Préfecture</text>
          </g>
 
          <!--gare de Neuville-Université-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 400 370)" class="st4 st5">Neuville-Université</text>
            <circle class="st16" cx="383.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Neuville-Université</text>
          </g>
 
          <!--gare de Conflans-Fin-d'Oise-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 480 370)" class="st4 st5">Conflans-Fin-d&apos;Oise</text>
            <circle class="st16" cx="463.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Conflans-Fin-d&apos;Oise</text>
          </g>
 
          <!--gare de Achères-Ville-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 560 370)" class="st4 st5">Achères-Ville</text>
            <circle class="st16" cx="543.6" cy="405.6" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Achères-Ville</text>
          </g>
 
          <!--gare de Maisons-Laffitte-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 865 400)" class="st4 st5">Maisons-Laffitte</text>
            <circle class="st16" cx="863.6" cy="441.9" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Maisons-Laffitte</text>
          </g>
 
          <!--gare de Sartrouville-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 955 400)" class="st4 st5">Sartrouville</text>
            <circle class="st16" cx="943.6" cy="441.9" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Sartrouville</text>
          </g>
 
          <!--gare de Houilles-Carrières-sur-Seine-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1040 400)" class="st4 st5">Houilles - Carrières-sur-Seine</text>
            <circle class="st16" cx="1023.6" cy="441.9" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Houilles - Carrières-sur-Seine</text>
          </g>
 
          <!--branche A4-->
          <!--gare de Val de Fontenay-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1907 400)" class="st4 st5">Val de Fontenay</text>
            <circle class="st15" cx="1903.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Val de Fontenay</text>
          </g>
 
          <!--gare de Neuilly-Plaisance-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1990 400)" class="st4 st5">Neuilly-Plaisance</text>
            <circle class="st15" cx="1983.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Neuilly-Plaisance</text>
          </g>
 
          <!--gare de Bry-sur-Marne-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2070 400)" class="st4 st5">Bry-sur-Marne</text>
            <circle class="st15" cx="2063.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Bry-sur-Marne</text>
          </g>
 
          <!--gare de Noisy-le-Grand-Mont-d'Est-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2155 400)" class="st4 st5">Noisy-le-Grand - Mont-d&apos;Est</text>
            <circle class="st15" cx="2143.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Noisy-le-Grand - Mont-d&apos;Est</text>
          </g>
 
          <!--gare de Noisy-Champs-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2240 400)" class="st4 st5">Noisy - Champs</text>
            <circle class="st15" cx="2223.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Noisy - Champs</text>
          </g>
 
          <!--gare de Noisiel-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2315 400)" class="st4 st5">Noisiel</text>
            <circle class="st15" cx="2303.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Noisiel</text>
          </g>
 
          <!--gare de Lognes-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2395 400)" class="st4 st5">Lognes</text>
            <circle class="st15" cx="2383.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Lognes</text>
          </g>
 
          <!--gare de Torcy-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2480 400)" class="st4 st5">Torcy</text>
            <circle class="st15" cx="2463.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Torcy</text>
          </g>
 
          <!--gare de Bussy-Saint-Georges-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2560 400)" class="st4 st5">Bussy-Saint-Georges</text>
            <circle class="st15" cx="2543.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Bussy-Saint-Georges</text>
          </g>
 
          <!--gare de Val d'Europe-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2645 400)" class="st4 st5">Val d&apos;Europe</text>
            <circle class="st15" cx="2623.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Val d&apos;Europe</text>
          </g>
 
          <!--gare de Marne-la-Vallée-Chessy-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 2725 400)" class="st4 st5">Marne-la-Vallée - Chessy</text>
            <circle class="st15" cx="2703.6" cy="441.9" r="12.5"/>
            <text class="desc" x="1850" y="60">Gare de Marne-la-Vallée - Chessy</text>
          </g>
 
          <!--branche A5-->
          <!--gare de Poissy-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 645 370)" class="st4 st5">Poissy</text>
            <circle class="st16" cx="623.6" cy="478.2" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Poissy</text>
          </g>
 
          <!--gare de Achères-Grand-Cormier-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 715 370)" class="st4 st5">Achères-Grand-Cormier</text>
            <circle class="st16" cx="703.6" cy="478.2" r="12.5"/>
            <text class="desc" x="250" y="60">Gare de Achères-Grand-Cormier</text>
          </g>
 
          <!--tronçon central-->
 
          <!--gare de Nanterre-Préfecture-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1190 510)" class="st4 st5">Nanterre-Préfecture</text>
            <circle class="st15" cx="1183.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Nanterre-Préfecture</text>
          </g>
 
          <!--gare de La Défense-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1280 510)" class="st4 st5">La Défense</text>
            <circle class="st15" cx="1263.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de La Défense</text>
          </g>
 
          <!--gare de Charles de Gaulle-Etoile-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1360 510)" class="st4 st5">Charles de Gaulle - Étoile</text>
            <circle class="st15" cx="1343.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Charles de Gaulle - Étoile</text>
          </g>
 
          <!--gare de Auber-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1437 510)" class="st4 st5">Auber</text>
            <circle class="st15" cx="1423.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Auber</text>
          </g>
 
          <!--gare de Châtelet-Les Halles-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1516 510)" class="st4 st5">Châtelet - Les Halles</text>
            <circle class="st15" cx="1503.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Châtelet - Les Halles</text>
          </g>
 
          <!--gare de Gare de Lyon-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1596 510)" class="st4 st5">Gare de Lyon</text>
            <circle class="st15" cx="1583.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Gare de Lyon</text>
          </g>
 
          <!--gare de Nation-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1679 510)" class="st4 st5">Nation</text>
            <circle class="st15" cx="1663.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Nation</text>
          </g>
 
          <!--gare de Vincennes-->
          <g class="ville">
            <text transform="matrix(0.5 -0.866 0.866 0.5 1757 510)" class="st4 st5">Vincennes</text>
            <circle class="st15" cx="1743.6" cy="554.3" r="12.5"/>
            <text class="desc" x="1250" y="60">Gare de Vincennes</text>
          </g>
 
          <g id="layer1" transform="translate(0,307.09595)" inkscape:groupmode="layer" inkscape:label="logo" sodipodi:insensitive="true">
            <g id="g13376" transform="translate(-21.330339,-1405.8168)" class="st7">
              <g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
                <circle id="circle6196" class="st8" cx="1163.7" cy="658.1" r="16"/>
                <path id="path6198" inkscape:connector-curvature="0" class="st9" d="M1181.2,658.2c0-9.7-8.1-17.6-17.5-17.6
                                                                                    c-9.7,0-17.5,7.9-17.5,17.6c0,9.6,7.9,17.4,17.5,17.4C1173.4,675.6,1181.2,667.8,1181.2,658.2 M1178.8,658.2c0,8.2-6.8,15-15,15
                                                                                    c-8.3,0-15.1-6.7-15.1-15c0-8.4,6.8-15.2,15.1-15.2C1172,642.9,1178.8,649.9,1178.8,658.2z M1176.2,655.4c0-2.4-1.8-3.5-3.5-3.5
                                                                                    h-3.3c-0.6,0-1,0.5-1,1v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5
                                                                                    c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9C1175.3,658.2,1176.2,657.2,1176.2,655.4L1176.2,655.4z M1167.3,663c0-0.5-0.4-1.1-1-1.1h-3.3v-3
                                                                                    h2.8c0.6,0,1-0.5,1-1c0-0.5-0.3-1-1-1h-2.8v-2.8h3.1c0.6,0,1-0.6,1-1.1c0-0.5-0.4-1.1-1-1.1h-4.5c-0.6,0-1,0.5-1,1v10.2
                                                                                    c0,0.6,0.6,0.9,1.2,0.9h4.5C1167,664.1,1167.3,663.5,1167.3,663z M1159.3,655.4c0-2.4-1.7-3.5-3.5-3.5h-3.3c-0.6,0-1,0.5-1,1
                                                                                    v10.3c0,0.6,0.6,0.9,1.2,0.9c0.7,0,1.2-0.3,1.2-0.9v-4h1l2,4.4c0.2,0.3,0.5,0.5,0.8,0.5c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9
                                                                                    C1158.3,658.2,1159.3,657.2,1159.3,655.4L1159.3,655.4z M1173.8,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
                                                                                    C1172.8,653.9,1173.8,654.4,1173.8,655.6z M1156.9,655.6c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
                                                                                    C1155.9,653.9,1156.9,654.4,1156.9,655.6z"/>
              </g>
              <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
                <path id="path6202" inkscape:connector-curvature="0" class="st10" d="M98.2,547.2c0-9.7-7.8-17.5-17.5-17.5
                                                                                     c-9.7,0-17.5,7.8-17.5,17.5c0,9.7,7.8,17.5,17.5,17.5C90.3,564.7,98.2,556.8,98.2,547.2"/>
                <path id="path6204" inkscape:connector-curvature="0" class="st8" d="M95.7,547.2c0-8.3-6.7-15-15-15.1c-8.3,0-15.1,6.7-15,15
                                                                                    c0,8.3,6.7,15.1,15,15.1C89,562.2,95.7,555.5,95.7,547.2"/>
                <path id="path6206" inkscape:connector-curvature="0" class="st10" d="M72.6,554.7l4,0l1.1-3.2h6.2l1,3.2l3.6,0l-5.9-16.8h-4
                                                                                     L72.6,554.7 M78.5,548.7l1.7-5.3c0.2-0.7,0.4-1.6,0.4-2.1l0.1,0c0,0.6,0.2,1.4,0.4,2.1l1.7,5.3L78.5,548.7L78.5,548.7z"/>
              </g>
            </g>
          </g>
          <path id="circle15644_5_" class="st3" d="M556.1,405.6"/>
          <g id="g6200_1_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_1_" inkscape:connector-curvature="0" class="st10" d="M210.7,347.6c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C206.1,357.9,210.7,353.3,210.7,347.6"/>
            <path id="path6204_1_" inkscape:connector-curvature="0" class="st8" d="M209.2,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C205.3,356.5,209.2,352.5,209.2,347.6"/>
          </g>
          <rect x="447.7" y="656.1" class="st11" width="35" height="22.3"/>
          <text transform="matrix(1 0 0 1 447.6845 674.4961)" class="st10 st12 st13">A1</text>
          <g id="g6200_2_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_2_" inkscape:connector-curvature="0" class="st10" d="M1100.1,347.6c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1095.5,357.9,1100.1,353.3,1100.1,347.6"/>
            <path id="path6204_2_" inkscape:connector-curvature="0" class="st8" d="M1098.6,347.6c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C1094.7,356.5,1098.6,352.5,1098.6,347.6"/>
          </g>
          <rect x="2607.1" y="656.5" class="st11" width="35" height="22.3"/>
          <text transform="matrix(1 0 0 1 2607.1201 674.9199)" class="st10 st12 st13">A2</text>
          <g id="g6200_3_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_3_" inkscape:connector-curvature="0" class="st10" d="M1166,255.1c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C1161.3,265.4,1166,260.8,1166,255.1"/>
            <path id="path6204_3_" inkscape:connector-curvature="0" class="st8" d="M1164.5,255.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C1160.5,264,1164.5,260,1164.5,255.1"/>
          </g>
          <polygon class="st11" points="2802.1,455.1 2767.1,454.1 2767.1,431.7 2802.1,432.7 "/>
          <text transform="matrix(1 0 0 1 2767.1201 450.1821)" class="st10 st12 st13">A4</text>
          <rect x="1175.8" y="664" class="st11" width="555.8" height="115.6"/>
          <text transform="matrix(1 0 0 1 1251.1055 698.335)"><tspan x="0" y="0" class="st12 st14">Migration Ligne A </tspan><tspan x="111.9" y="57.6" class="st12 st14">Phase 1</tspan></text>
 
          <g id="g6200_4_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_4_" inkscape:connector-curvature="0" class="st10" d="M243.6,270.2c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C239,280.5,243.6,275.9,243.6,270.2"/>
            <path id="path6204_4_" inkscape:connector-curvature="0" class="st8" d="M242.2,270.2c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C238.2,279.1,242.2,275.1,242.2,270.2"/>
          </g>
          <rect x="526.7" y="469.1" class="st11" width="35" height="22.3"/>
          <text transform="matrix(1 0 0 1 526.6845 487.4961)" class="st10 st12 st13">A5</text>
          <g id="g6200_5_" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
            <path id="path6202_5_" inkscape:connector-curvature="0" class="st10" d="M46,240.1c0-5.7-4.6-10.3-10.3-10.3
                                                                                    c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3C41.3,250.4,46,245.8,46,240.1"/>
            <path id="path6204_5_" inkscape:connector-curvature="0" class="st8" d="M44.5,240.1c0-4.9-4-8.8-8.9-8.9c-4.9,0-8.9,4-8.9,8.8
                                                                                   c0,4.9,4,8.9,8.9,8.9C40.5,249,44.5,245,44.5,240.1"/>
          </g>
          <rect x="46.7" y="396" class="st11" width="35" height="22.3"/>
          <text transform="matrix(1 0 0 1 46.6848 414.4251)" class="st10 st12 st13">A3</text>
        </svg>
 
      </div>
      <div class="map__list">
 
      </div>
    </div>
  </body>
</html>

On obtient :

Remarque :

Code :

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

            <text class="desc" x="250" y="1050">Gare de Saint-Germain-en-Laye</text>

Pour placer le texte où tu veux, il suffit de modifier les coordonnées : x="..." y="...".
Évidemment, tu peux en changer le texte...

[EDIT] Ah, au fait... FULL CSS !

mousover sur plusieurs éléments en même temps

JavaScript

Vue hybride

Discussions similaires

Partager

Partager