Création carte RER A - onclick - circle - MotdP

**jean mich jean mich** · 24/03/2020, 12h46

Bonjour à tous, j'espère que vous allez tous bien malgré les événements actuels.

Je suis sur un projet de création d'une carte de suivi travaux sur la ligne RER A. (suite de cette discussion)

Je vous mets mon HTML et CSS en dessous

J'aimerais à ce stade du projet :

1) Rendre la couleur des cercles (blancs) modifiable au clic et dans la logique suivante :

Cercle couleur blanc
1er clic
Cercle couleur 1
2e clic
Cercle couleur 2
3e clic
Cercle couleur 3
4e clic
Cercle couleur blanche

2) Rendre cette modification possible uniquement par mot de passe (bouton clic + pop up + MdP)
(Il me semble que dois passer par du PhP mais je n'en suis pas sûr)

3) Protéger mon code par MdP également

4) Rendre le rectangle rose animable lorsque l'on passe dessus avec le curseur (hover).
Je voudrais que le dégradé translate de gauche à droite comme une vague (couleur foncée translate de gauche à droite).

En m'excusant d'avance si j'utilise le mauvais vocabulaire et la longueur du code.
Ne faites pas attention au texte qui s'affiche au survol d'une gare.

Merci d'avance.

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
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
<!DOCTYP<!DOCTYPE html>
<html>
<head>
    <title>Migration Ligne A</title>
    <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="rera.css">
    <style type="text/css">
        .st0{fill:none;stroke:#E2231A;stroke-width:30;stroke-linecap:round;}
        .st1{stroke:#E2231A;stroke-width:30;}
        .st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:4;}
        .st3{fill:#F9F9F9;stroke:#FFFFFF;stroke-width:5;}
        .st4{fill:none;stroke:#E2231A;stroke-width:30;}
        .st5{stroke:#000000;stroke-width:4;}
        .st6{fill:none;stroke:#000000;}
        .st7{font-family:'ArialMT';}
        .st8{font-size:31.4093px;}
        .st9{font-size:32px;}
        .st10{enable-background:new    ;}
        .st11{fill:#FFFFFF;}
        .st12{fill:#050D9E;}
        .st13{fill:#E2231A;}
        .st14{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:5;}
        .st15{fill:none;}
        .st16{font-family:'Arial-BoldMT';}
        .st17{font-size:25.7578px;}
        .st18{font-size:48px;}
        .st19{fill:#B0C2DB;}
        .st20{opacity:0.25;fill:url(#SVGID_1_);}
    </style>
</head>
<body>
<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 3017 1588.7"
     style="enable-background:new 0 0 3017 1588.7;" xml:space="preserve">
    <g id="layer2" transform="translate(-96.135793,207.65463)" inkscape:groupmode="layer" inkscape:label="ligne" sodipodi:insensitive="true">
	<path id="path3787" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st0" d="M1951.6,563.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="st1" d="M1950.9,559.6h-719.3"/>
        <path id="path16070" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st0" d="M2671.3,671.9h-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="st4" d="M1227.7,563.5v-83.7
		c-0.2-27.8-15.7-33.1-31.4-32.6H911.6"/>
        <path id="path14568" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st0" d="M670,671.9h524.2
		c17.8,0.6,33.3-4.8,33.5-32.6v-83.7"/>
        <path id="path14820_1_" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st0" d="M909.4,447.2v-3.7
		c-0.2-27.8-15.7-33.1-31.4-32.6H271.6"/>
        <path id="path14822" inkscape:connector-curvature="0" sodipodi:nodetypes="cccc" class="st0" d="M751.6,483.5h124.4
		c17.8,0.6,33.3-4.8,33.5-32.6v-3.7"/>
        <path id="path15678_2_" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st6" d="M751.2,468.4v-83.1"/>
        <path id="path15678_3_" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="st6" d="M831.6,468.4v-83.1"/>
</g>
 
    <!-- Branche A1--> <!-- Branche A1--> <!-- Branche A1--> <!-- Branche A1--> <!-- Branche A1-->
 
    <!--Gare de Saint-Germain-en-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 406.721253 1214.5925)" class="st7 st8">Saint-Germain-en-Laye</text>
    <circle id="saint_germain_en_laye" class="st2" cx="575.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Le Vésinet-Le Pecq-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 513.352153 1185.7712)" class="st7 st8">Le Vésinet - Le Pecq</text>
    <circle id="le_vésinet_le_pecq" class="st2" cx="655.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Le Vésinet-Centre-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 611.267653 1163.9646)" class="st7 st8">Le Vésinet - Centre</text>
    <circle id="le_vésinet_centre" class="st2" cx="735.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Chatou-Croissy-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 716.721553 1118.8474)" class="st7 st8">Chatou-Croissy</text>
    <circle id="chatou_croissy" class="st2" cx="815.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Rueil-Malmaison-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 786.810353 1137.113)" class="st7 st8">Rueil-Malmaison</text>
    <circle id="rueil_malmaison" class="st2" cx="895.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Nanterre-Ville-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 891.109753 1102.5447)" class="st7 st8">Nanterre-Ville</text>
    <circle id="nanterre_ville" class="st2" cx="975.464207" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Nanterre-Université-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 936.712953 1171.489)" class="st7 st8">Nanterre-Université</text>
    <circle id="nanterre_université" class="st2" cx="1055.46421" cy="879.55463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Nanterre-Préfecture-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1216.83215 724.1531)" class="st7 st8">Nanterre-Préfecture</text>
    <circle id="nanterre_préfecture" class="st2" cx="1215.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!-- Branche A2--> <!-- Branche A2--> <!-- Branche A2--> <!-- Branche A2--> <!-- Branche A2-->
 
    <!--Gare de Fonyenay-sous-Bois-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1800.12415 1175.7302)" class="st7 st8">Fontenay-sous-Bois</text>
    <circle id="circle4777_11_" class="st2" cx="1935.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Nogent sur-Marne-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1893.44295 1153.3923)" class="st7 st8">Nogent-sur-Marne</text>
    <circle id="circle4777_13_" class="st2" cx="2015.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Joinville-le-Pont-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1994.54865 1127.3875)" class="st7 st8">Joinville-le-Pont</text>
    <circle id="circle4777_12_" class="st2" cx="2095.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Saint-Maur-Créteil-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2047.53399 1168.55837)" class="st7 st8">Saint-Maur - Créteil</text>
    <circle id="circle4777_14_" class="st14" cx="2175.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Le Parc de Saint-Maur-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2108.24195 1202.2546)" class="st7 st8">Le Parc de Saint-Maur</text>
    <circle id="circle4777_15_" class="st2" cx="2255.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Champigny-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2264.46995 1069.0535)" class="st7 st8">Champigny</text>
    <circle id="circle4777_16_" class="st14" cx="2335.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de la Varenne-Chennevières-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2220.03435 1277.9324)" class="st7 st9">La Varenne - Chennevrières</text>
    <circle id="circle4777_17_" class="st2" cx="2415.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Sucy-Bonneuil-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2395.51465 1124.3865)" class="st7 st8">Sucy - Bonneuil</text>
    <circle id="circle4777_18_" class="st2" cx="2495.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Boissy-Saint-Léger-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2454.03768 1163.18728)" class="st7 st8">Boissy-Saint-Léger</text>
    <circle id="circle4777_19_" class="st2" cx="2575.5" cy="879.6" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Branche A3 - SNCF --> <!--Branche A3 - SNCF --> <!--Branche A3 - SNCF --> <!--Branche A3 - SNCF -->
 
    <!--Gare de Poissy-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 658.828453 585.4568)" class="st7 st8">Poissy</text>
    <circle id="poissy" class="st5" cx="655.464207" cy="691.15463" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare d'Achères-Grand-Cormier-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 739.947853 583.5173)" class="st7 st8">Achères-Grand-Cormier</text>
    <circle id="acheres_grand_cormier" class="st5" cx="735.464207" cy="691.15463" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Branche A4--> <!--Branche A4--> <!--Branche A4--> <!--Branche A4--> <!--Branche A4-->
 
    <!--Gare de Vincennes-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1777.93245 723.2468)" class="st7 st8">Vincennes</text>
    <circle id="Vincennes" class="st2" cx="1775.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Val de Fontenay-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1939.88635 615.9568)" class="st7 st8">Val de Fontenay</text>
    <circle id="Val de Fontenay" class="st2" cx="1935.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Neuilly Plaisance-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2018.77125 612.8894)" class="st7 st8">Neuilly-Plaisance</text>
    <circle id="neuilly_plaisance" class="st2" cx="2015.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Bry-sur-Marne-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2098.76335 614.9031)" class="st7 st8">Bry-sur-Marne</text>
    <circle id="bry_sur_marne" class="st2" cx="2095.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Noisy-le-Grand-Mont-d'Est-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2178.84395 611.7634)" class="st7 st8">Noisy-le-Grand - Mont-d&apos;Est</text>
    <circle id="noisy_le_grand" class="st2" cx="2175.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Noisy-Champs-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2258.67505 614.8826)" class="st7 st8">Noisy - Champs</text>
    <circle id="noisy_champs" class="st2" cx="2255.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Noisiel-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2343.69385 614.8444)" class="st7 st8">Noisiel</text>
    <circle id="noisiel" class="st2" cx="2335.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Lognes-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2421.70525 611.8298)" class="st7 st8">Lognes</text>
    <circle id="lognes" class="st2" cx="2415.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Torcy-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2501.51045 616.4353)" class="st7 st8">Torcy</text>
    <circle id="torcy" class="st2" cx="2495.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Bussy-Saint-Georges-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2578.67085 612.8894)" class="st7 st8">Bussy-Saint-Georges</text>
    <circle id="bussy_saint_georges" class="st2" cx="2575.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Val d'Europe-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2663.70555 616.0789)" class="st7 st8">Val d&apos;Europe</text>
    <circle id="val_d_europe" class="st2" cx="2655.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Marne-la-Vallée-Chessy-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 2744.79345 610.6765)" class="st7 st8">Marne-la-Vallée - Chessy</text>
    <circle id="marne_la_vallée_chessy" class="st2" cx="2733.46421" cy="654.85463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Branche A5 - SNCF--> <!--Branche A5 - SNCF--> <!--Branche A5 - SNCF--> <!--Branche A5 - SNCF-->
 
    <!--Gare de Cergy-le-Haut-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 179.555253 584.5808)" class="st7 st8">Cergy-le-Haut</text>
    <circle id="cergy_le_haut" class="st5" cx="175.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Cergy-Saint-Christophe-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 259.474653 584.7205)" class="st7 st8">Cergy-Saint-Christophe</text>
    <circle id="cergy_saint_christophe" class="st5" cx="255.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Cergy-Préfecture-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 339.466853 584.7341)" class="st7 st8">Cergy-Préfecture</text>
    <circle id="cergy_préfecture" class="st5" cx="335.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Neuville-Université-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 418.786253 585.53)" class="st7 st8">Neuville-Université</text>
    <circle id="neuville_université" class="st5" cx="415.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Conflans-Fin-d'Oise-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 499.497653 584.6804)" class="st7 st8">Conflans-Fin-d&apos;Oise</text>
    <circle id="conflans fin d'oise" class="st5" cx="495.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare d'Achères-Ville-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 580.020553 583.3914)" class="st7 st8">Achères-Ville</text>
    <circle id="achères_ville" class="st5" cx="575.5" cy="618.5" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Maisons-Laffitte-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 860.759353 621.9089)" class="st7 st8">Maisons-Laffitte</text>
    <circle id="maison_laffite" class="st5" cx="895.464207" cy="654.85463" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Sartrouville-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 954.578253 620.8738)" class="st7 st8">Sartrouville</text>
    <circle id="sartrouville" class="st5" cx="975.464207" cy="654.85463" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Gare de Houilles-Carrières-sur-Seine-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1045.67535 599.4031)" class="st10"><tspan x="0" y="0" class="st7 st8">Houilles - Carrières -</tspan><tspan x="0" y="37.7" class="st7 st8">sur-Seine</tspan></text>
    <circle id="houilles_carrière_sur_seine" class="st5" cx="1055.46421" cy="654.85463" r="10"/>
        <text class="desc" x="250" y="60">Périmètre SNCF</text>
    </g>
 
    <!--Tronçon Central-->  <!--Tronçon Central-->  <!--Tronçon Central-->  <!--Tronçon Central-->
 
    <!--Gare de La Défense-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1296.63825 724.2127)" class="st7 st8">La Défense</text>
    <circle id="la_defense" class="st2" cx="1295.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Charles de Gaulle-Etoile-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1377.47075 724.4304)" class="st7 st8">Charles de Gaulle - Étoile</text>
    <circle id="Charles de Gaulle-Etoile" class="st2" cx="1375.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare d'Auber-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1457.98615 723.1541)" class="st7 st8">Auber</text>
    <circle id="Auber" class="st2" cx="1455.46221" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Châtelet les Halles-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1537.47855 724.4168)" class="st7 st8">Châtelet - Les Halles</text>
    <circle id="Châtelet" class="st2" cx="1535.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Lyon-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1617.42485 724.5095)" class="st7 st8">Gare de Lyon</text>
    <circle id="Gare_de_Lyon" class="st2" cx="1615.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
    <!--Gare de Nation-->
    <g class="ville">
    <text transform="matrix(0.5 -0.866 0.866 0.5 1696.77085 725.2595)" class="st7 st8">Nation</text>
    <circle id="Nation" class="st3" cx="1695.46421" cy="767.25463" r="10"/>
        <text class="desc" x="1180" y="800"> Date début travaux : JJ/MM/AAAA
              <tspan x="1180" y="850"> Date fin travaux : JJ/MM/AAAA </tspan>
            <tspan x="1180" y="900"> Type travaux : télésonorisation </tspan>
            <tspan x="1180" y="950"> Code REFPAT :</tspan>
            <tspan x="1180" y="1000"> Type baie : </tspan>
            <tspan x="1180" y="1050"> Type interface : </tspan>
            </text>
    </g>
 
</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="st10">
		<g id="g6194" transform="matrix(2.4285712,0,0,2.4285212,-2743.1034,-446.93566)">
			<circle id="circle6196" class="st11" cx="1732.7" cy="1066" r="16"/>
            <path id="path6198" inkscape:connector-curvature="0" class="st12" d="M1750.2,1066c0-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.4C1742.4,1083.5,1750.2,1075.7,1750.2,1066 M1747.8,1066c0,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.2C1741,1050.8,1747.8,1057.7,1747.8,1066z M1745.3,1063.2
				c0-2.4-1.8-3.5-3.5-3.5h-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.4
				c0.2,0.3,0.5,0.5,0.8,0.5c0.7,0,1.7-0.7,1.3-1.4l-1.9-3.9C1744.3,1066,1745.3,1065,1745.3,1063.2L1745.3,1063.2z M1736.4,1070.9
				c0-0.5-0.4-1.1-1-1.1h-3.3v-3h2.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.5
				c-0.6,0-1,0.5-1,1v10.2c0,0.6,0.6,0.9,1.2,0.9h4.5C1736,1072,1736.4,1071.3,1736.4,1070.9z M1728.3,1063.2c0-2.4-1.7-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.9C1727.4,1066,1728.3,1065,1728.3,1063.2L1728.3,1063.2z M1742.8,1063.5c0,1.5-1.4,1.8-2.2,1.8
				h-0.7v-3.5h0.8C1741.9,1061.8,1742.8,1062.3,1742.8,1063.5z M1725.9,1063.5c0,1.5-1.4,1.8-2.2,1.8h-0.7v-3.5h0.8
				C1724.9,1061.8,1725.9,1062.3,1725.9,1063.5z"/>
		</g>
        <g id="g6200" transform="matrix(2.4285712,0,0,2.4285712,-22.978154,-177.63837)">
			<path id="path6202" inkscape:connector-curvature="0" class="st13" d="M667.2,955.1c0-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.5C659.4,972.5,667.2,964.7,667.2,955.1"/>
            <path id="path6204" inkscape:connector-curvature="0" class="st11" d="M664.8,955.1c0-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.1C658,970.1,664.8,963.4,664.8,955.1"/>
            <path id="path6206" inkscape:connector-curvature="0" class="st13" d="M641.6,962.6l4,0l1.1-3.2h6.2l1,3.2l3.6,0l-5.9-16.8h-4
				L641.6,962.6 M647.5,956.6l1.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.3L647.5,956.6L647.5,956.6z"/>
		</g>
	</g>
</g>
 
    <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="st13" d="M223.8,435.3c0-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.3C219.2,445.6,223.8,441,223.8,435.3"/>
        <path id="path6204_1_" inkscape:connector-curvature="0" class="st11" d="M222.3,435.3c0-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.9C218.4,444.2,222.3,440.2,222.3,435.3"/>
</g>
    <rect x="480.5" y="870" class="st15" width="35" height="22.3"/>
    <text transform="matrix(1 0 0 1 480.5073 888.4526)" class="st13 st16 st17">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="st13" d="M1113.2,435.3c0-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.3C1108.6,445.6,1113.2,441,1113.2,435.3"/>
        <path id="path6204_2_" inkscape:connector-curvature="0" class="st11" d="M1111.7,435.3c0-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.9C1107.8,444.2,1111.7,440.2,1111.7,435.3"/>
</g>
    <rect x="2638.9" y="868.4" class="st15" width="35" height="22.3"/>
    <text transform="matrix(1 0 0 1 2638.9438 886.8765)" class="st13 st16 st17">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="st13" d="M1179.1,342.8c0-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.3C1174.5,353.1,1179.1,348.5,1179.1,342.8"/>
        <path id="path6204_3_" inkscape:connector-curvature="0" class="st11" d="M1177.6,342.8c0-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.9C1173.6,351.6,1177.6,347.7,1177.6,342.8"/>
</g>
    <rect x="2798.9" y="643.7" class="st15" width="35" height="22.3"/>
    <text transform="matrix(1 0 0 1 2798.9429 662.1392)" class="st13 st16 st17">A4</text>
    <rect x="1216.7" y="859.9" class="st15" width="555.8" height="115.6"/>
    <text transform="matrix(1 0 0 1 1291.9282 894.2915)"><tspan x="0" y="0" class="st16 st18">Migration Ligne A </tspan><tspan x="111.9" y="57.6" class="st16 st18">Phase 1</tspan></text>
    <g transform="translate(0.000000,462.000000) scale(0.100000,-0.100000)">
	<path class="st19" d="M1097.5,4181.1c0-1.7-5.7-32.8-12.7-69.4c-7-36.2-14-74.2-15.7-83.8c-1.3-9.6-3.5-21-4.8-24.9
		c-2.2-7,1.3-7.9,28.4-7.9c17,0,31,1.3,31,2.6c0,3.5,25.3,143.7,28.4,158.1c2.2,9.2,4.4,9.6,41,9.6c46.7,0,61.6-7.9,61.6-33.2
		c0-32.8-34.1-51.5-83.8-47.2c-14,1.3-25.3,0.4-25.3-1.3c0-1.7,17.5-23.1,38.9-47.2l38.4-44.1l35.8-0.4c19.2-0.4,35.4,0.4,35.4,1.7
		c0,1.3-15.7,19.2-34.9,39.7l-34.9,38l27.9,5.2c47.6,8.7,68.6,25.8,69.4,56.3c0.4,17.9-12.7,33.2-35.4,40.6
		C1269.2,4179.4,1097.5,4186.4,1097.5,4181.1z"/>
        <path class="st19" d="M1420.7,4087.7c-82.5-92.1-84.3-94.8-72.1-96.1c11.4-1.3,16.2,1.7,34.9,22.7l21.8,24.9l59-1.3l59-1.3
		l12.2-22.7l12.2-23.1h33.2h32.8l-22.7,42.8c-50.2,93.9-80.8,149.4-83,148.9C1506.7,4182.4,1467.4,4139.6,1420.7,4087.7z
		 M1496.7,4088.1c8.7-16.2,15.7-31,15.7-32.8c0-1.7-20.5-3.5-45.9-3.5c-25.3,0-45.9,1.3-45.9,2.6c0,4.4,52.8,62.9,56.8,62.9
		C1479.6,4117.4,1488.4,4104.3,1496.7,4088.1z"/>
        <path class="st19" d="M1618.1,4171.1c1.3-7,7.9-7.9,48.9-8.7c26.2-0.9,48.5-2.2,49.8-3.5c1.3-1.3-3.9-37.1-11.4-79.9
		c-7.9-43.2-14-80.4-14-83.4s10.5-4.8,30.6-4.8c17,0,30.6,1.3,30.6,2.6c0,4.4,26.6,152.4,28.8,159.8c1.7,6.6,9.6,7.9,53.3,8.7
		c44.5,1.3,51.1,2.2,52.4,9.2c1.3,7-7.4,7.4-134.5,7.4S1616.8,4178.1,1618.1,4171.1z"/>
        <path class="st19" d="M1923.3,4096.8c-7.9-45.4-15.3-87.8-16.6-94.3l-2.6-12.2l30.1,1.3l30.1,1.3l7,37.1l6.6,37.1l65.5,2.6
		c68.6,2.2,88.6,7.9,107.9,29.3c11.4,12.7,14.8,41.9,6.1,55c-13.1,19.7-39.7,24.5-134.1,24.5h-85.6L1923.3,4096.8z M2089.3,4152.7
		c13.1-15.7,10.5-34.1-6.6-51.1c-16.2-16.2-22.3-17.5-90.4-15.3l-11.4,0.4l7,39.7l6.6,39.7l43.2-1.7
		C2077.1,4163.2,2081.9,4162.3,2089.3,4152.7z"/>
        <path class="st19" d="M1484.9,3888.1c-109.6-17.9-206.1-58.1-290-120.5c-31.4-24-114.9-102.6-114.9-108.7c0-1.7,7.9-5.2,17.9-8.3
		c26.6-7.9,99.1-46.3,124-65.5l21.8-16.6l30.1,26.2c100.4,86.5,214.9,126.6,338,119.7c220.1-13.1,394.8-170.3,431-387.3
		c13.5-80.8,3.5-168.1-28.8-251.1c-31.4-81.7-87.8-160.7-145.9-205.7c-56.3-43.2-53.7-39.7-65.5-84.7s-24-111.8-24-134.1v-13.5
		l16.6,4.4c28.4,7.9,98.3,40.6,136.7,63.8c159.4,96.5,266.4,255,301.3,446.3c9.6,52.8,7.4,171.2-3.9,225.8
		c-32.8,153.3-101.8,269.4-216.2,365.5c-79,66.4-186.9,117.5-289.1,138C1662.2,3894.2,1542.1,3897.3,1484.9,3888.1z"/>
        <path class="st19" d="M874.8,3621.3c-40.2-4.4-79-12.7-105.7-22.3l-29.7-10.9v-43.7c0-43.2,0-43.7,10-41
		c84.7,24.9,152.4,32.8,216.2,25.8c76.4-8.3,137.1-36.2,213.1-98.3c94.8-76.9,148-95.6,239.7-83c24,3.5,54.6,6.6,67.7,7
		c28.4,0.4,28.8-0.4,33.2-59.8c3.1-48,10-57.2,47.6-66.8c30.1-7.9,37.1-14.4,37.1-37.1c0-9.2,2.2-21.8,4.4-27.9
		c3.9-10.9,6.1-11.8,21-9.2c8.7,1.7,22.3,3.5,29.3,3.9l13.1,0.9l-1.3-22.7c-1.7-24.5,6.6-46.3,19.7-51.5c4.4-1.7,17.9-5.7,29.7-8.3
		c28.8-6.6,29.7-14,7-65.1c-97.4-223.2-131.4-461.2-87.8-615.3l4.8-16.6h41c22.7,0,41.5,1.7,41.5,3.5c0,2.2-3.9,19.2-9.2,38.4
		c-11.8,44.5-15.7,143.7-8.7,207c12.2,107.4,55,261.6,106.6,384.3c29.3,69.4,32.3,88.2,17.9,107.9c-10,13.5-25.8,20.1-63.8,27.5
		c-35.8,7-42.8,14.4-46.7,47.6c-4.8,40.6-22.7,53.3-53.7,37.1l-13.5-7l3.1,20.5c4.8,31.4-2.2,43.7-30.6,54.6
		c-13.1,4.8-25.8,8.7-27.5,8.7c-8.7,0-13.1,14-18.3,59c-4.8,42.8-6.6,49.3-17.5,59.8c-10.9,10.9-14.8,12.2-44.1,12.2
		c-17.5,0-55.9-3.5-85.6-7.4c-44.5-6.1-58.1-6.6-78.6-2.2c-33.2,7-62.4,21.8-99.1,51.1c-103.5,81.2-170.3,115.3-264.2,132.8
		C964.8,3620,897.1,3623.9,874.8,3621.3z"/>
        <path class="st19" d="M953.9,3439.6c-20.1-61.6-23.6-88.6-24-186.9c-0.4-105.7,3.5-133.2,30.1-209.2
		c27.9-79.9,66.4-147.2,121.4-210.9c108.3-125.8,276.9-207.9,439.8-214l36.7-1.3l5.2,43.7c3.1,24,9.2,62,13.5,84.3
		c4.8,21.8,7.9,40.2,7.4,40.2c-0.4,0-20.5,2.2-45,4.4c-214,22.3-384.3,185.6-415.3,397.8c-7,46.3-3.5,135.8,6.1,169.9l7,24
		l-18.3,16.6c-27.1,24-70.3,47.2-110,58.5c-18.8,5.7-36.7,10-39.7,10C965.7,3466.7,958.7,3454.5,953.9,3439.6z"/>
</g>
 
<!--Début du code pour le rectangle-->
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="61.4565" y1="499.3624" x2="1187.5007" y2="499.3624">
	<stop  offset="0" style="stop-color:#FF7BAC"/>
        <stop  offset="1" style="stop-color:#FF7BAC;stop-opacity:0"/>
</linearGradient>
 
    <path id="micky" class="st20" d="M1164.2,732.8H84.8c-12.9,0-23.3-10.4-23.3-23.3V289.2c0-12.9,10.4-23.3,23.3-23.3h1079.4
	c12.9,0,23.3,10.4,23.3,23.3v420.3C1187.5,722.4,1177.1,732.8,1164.2,732.8z"/>
<!--Fin du code pour le rectangle-->
 
    <text class="desc" x="250" y="60">Périmètre SNCF</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="st13" d="M256.7,357.7c0-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.3C252.1,368,256.7,363.4,256.7,357.7"/>
        <path id="path6204_4_" inkscape:connector-curvature="0" class="st11" d="M255.3,357.7c0-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.9C251.3,366.6,255.3,362.6,255.3,357.7"/>
 
</g>
 
    <rect x="560.5" y="681.5" class="st15" width="35" height="22.3"/>
    <text transform="matrix(1 0 0 1 560.5073 699.9717)" class="st13 st16 st17">A3</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="st13" d="M59.1,327.8c0-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.3C54.4,338.1,59.1,333.5,59.1,327.8"/>
        <path id="path6204_5_" inkscape:connector-curvature="0" class="st11" d="M57.6,327.8c0-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.9C53.6,336.7,57.6,332.7,57.6,327.8"/>
</g>
    <rect x="80.5" y="608.9" class="st15" width="35" height="22.3"/>
    <text transform="matrix(1 0 0 1 80.5073 627.3817)" class="st13 st16 st17">A5</text>
 
></svg>
</body>
</html>

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 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;
    stroke:red;
    stroke-width:6;
}
/* description */
svg g.ville > text.desc {
    font-size:36px;
    fill:darkblue;
    display:none; /* on masque */
}
svg g.ville:hover > text.desc {
    display:block; /* on affiche */
}
 
/*
svg g:before {
  position:absolute;
  display:block;
  content:attr(id);
  top:100%;
  left:0;
  width:150px;
  height:50px;
  color:green;
  background:#fff;
  padding:10px;
  border:1px solid grey;
  z-index:10;
  display:none;
}
svg g:hover::before {
  display:block;
}
*/

**psychadelic** · 24/03/2020, 14h24

beau projet svg, mais vu la façon dont c'est codé, c'est une vraie prise de tête.

sinon, franchement des valeurs de positions ou de transition avec 6 chiffres derrière la virgule, c'est n'importe quoi; encore un truc fait par un graphiste qui s'imagine que comme les codeurs peuvent tout faire, cela les autorise un produire du svg dégueu!

toutes les données devraient être dans un arrary javascript pour génrer leur SVG
nom des gares, position, textes

pareil pour les pastilles A1...A5. (d'ailleurs Sartrouville est sur la ligne A5 ou A3 ?)

tout ça en utilisanrt les symbol SVG, ce serait pas du luxe..

faudrait aussi nettoyer le code de toutes les informations inkscape / sodipodi...

apres on pourra commencer à causer sur l'ergonomie...

**jean mich jean mich** · 25/03/2020, 09h34

Salut Psychadelic,
Merci pour ton message.
Je dois donc mettre chaque gare dans un array js ?
Je ne connais pas du tout js et je pensais que dans mon cas ça serait simple de modifier la couleur d'un circle.
Je fais tout comme tu dis et je reviens vers toi.
Non je ne suis graphiste

**NoSmoking** · 25/03/2020, 11h25

Bonjour,

1) Rendre la couleur des cercles (blancs) modifiable au clic et dans la logique suivante :

tu peux jouer avec l'événement onclick et ajouter/retrancher une classe qui prendra en compte la nouvelle couleur, il te faut récupérer les éléments et leur affecter l'événement, par exemple

Code :

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

1
2
3
4
5
6
7
const elementsCircle = document.querySelectorAll("circle.st2");
elementsCircle.forEach((el) => {
  el.addEventListener("click", (e) => {
    // les classes, par exemple, sont à gérer ici
    console.log(e.target.id)
  })
})

2) Rendre cette modification possible uniquement par mot de passe (bouton clic + pop up + MdP)

même pas en rêve côté client, mais si cela est généré côté serveur alors il suffit de ne pas mettre la fonctionnalité si le connecté n'est pas administrateur

3) Protéger mon code par MdP également

de quel code parles-tu, dès que c'est sur la toile tu n'auras aucun moyen de le planquer/protéger.

4) Rendre le rectangle rose animable lorsque l'on passe dessus avec le curseur (hover).

Tu peux ici te servir des transitons/animations CSS3

**psychadelic** · 28/03/2020, 05h42

vu que je suis un peu coincé chez moi, je t'ai fait ce truc; ça devrait t'avancer un peu...

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
<!DOCTYPE html> 
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>RER A</title>
<style>
  #lignes > path { fill:none; stroke:#E2231A; stroke-width:30; stroke-linecap:round; }
  #lignes > path:hover { stroke:orange; }
  g.gare-top text { text-anchor: start; }
  g.gare-bot text { text-anchor: end;   }
  g.gareB circle { fill:#fff; stroke:#fff; stroke-width:5; }    
  g.gareN circle { fill:#000; stroke:#000; stroke-width:5; }    
  #garesRER > g > path { fill:none; stroke:#000;  } /* report ligne A3  pour les noms de gares */
  #garesRER text   { font-family: ArialMT; font-size: 32px; }
  #garesRER > g.gareB { cursor: pointer; }
  #garesRER > g.gareB:hover text { fill: crimson; font-weight: bold; }
  #g00 { display: none; }
</style>
</head>
<body>
  <svg id="RER-A" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 3017 1588.7" >
    <g id="lignes">
      <path id="rer-A3" d="M655.464 691.155h124.4c17.8.6 33.3-4.8 33.5-32.6v-3.7" />
      <path id="rer-A5" d="M1131.564 771.155v-83.7c-.2-27.8-15.7-33.1-31.4-32.6h-286.8M813.364 654.855v-3.7c-.2-27.8-15.702-33.1-31.405-32.6H175.464" />
      <path id="rer-A1" d="M1286.204 767.137h-154.666M573.864 879.555h524.2c17.8.6 33.3-4.8 33.5-32.6v-79.812" />
      <path id="rer-A2" d="M2575.164 879.555h-686.2c-17.8.6-33.3-4.8-33.5-32.6v-83.7" /> 
      <path id="rer-A4" d="M1855.449 767.255l.015-79.8c.2-27.8 15.7-33.1 31.4-32.6h846.2M1855.449 767.255h-119.564"/>
      <path id="rer-A"  d="M 1734.9515,767.255 H 1258.2524" />
    </g>
    <g id="garesRER"></g>
  </svg>
<script>
const gares =
  [ { id:'g01', ville:'Saint-Germain-en-Laye',            x:'575.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' }
  , { id:'g02', ville:'Le Vésinet - Le Pecq',             x:'655.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g03', ville:'Le Vésinet - Centre',              x:'735.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g04', ville:'Chatou-Croissy',                   x:'815.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g05', ville:'Rueil-Malmaison',                  x:'895.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g06', ville:'Nanterre-Ville',                   x:'975.464',  y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g07', ville:'Nanterre-Université',              x:'1055.464', y:'879.555', st:0, ln: 'A1', typ: 't_1' } 
  , { id:'g08', ville:'Nanterre-Préfecture',              x:'1215.464', y:'767.255', st:0, ln: 'A1', typ: 't_2' } 
  , { id:'g09', ville:'Fontenay-sous-Bois',               x:'1935.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g10', ville:'Nogent-sur-Marne',                 x:'2015.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g11', ville:'Joinville-le-Pont',                x:'2095.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g12', ville:'Saint-Maur - Créteil',             x:'2175.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g13', ville:'Le Parc de Saint-Maur',            x:'2255.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g14', ville:'Champigny',                        x:'2335.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g15', ville:'La Varenne - Chennevrières',       x:'2415.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g16', ville:'Sucy - Bonneuil',                  x:'2495.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g17', ville:'Boissy-Saint-Léger',               x:'2575.5',   y:'879.6',   st:0, ln: 'A2', typ: 't_1' } 
  , { id:'g18', ville:'Poissy',                           x:'655.464',  y:'691.155', st:0, ln: 'A3', typ: 't_3' } 
  , { id:'g19', ville:'Achères-Grand-Cormier',            x:'735.464',  y:'691.155', st:0, ln: 'A3', typ: 't_3' } 
  , { id:'g20', ville:'Vincennes',                        x:'1775.464', y:'767.255', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g21', ville:'Val de Fontenay',                  x:'1935.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g22', ville:'Neuilly-Plaisance',                x:'2015.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g23', ville:'Bry-sur-Marne',                    x:'2095.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g24', ville:'Noisy-le-Grand - Mont-d&apos;Est', x:'2175.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g25', ville:'Noisy - Champs',                   x:'2255.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g26', ville:'Noisiel',                          x:'2335.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g27', ville:'Lognes',                           x:'2415.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g28', ville:'Torcy',                            x:'2495.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g29', ville:'Bussy-Saint-Georges',              x:'2575.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g30', ville:'Val d&apos;Europe',                x:'2655.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g31', ville:'Marne-la-Vallée - Chessy',         x:'2733.464', y:'654.855', st:0, ln: 'A4', typ: 't_2' } 
  , { id:'g32', ville:'Cergy-le-Haut',                    x:'175.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g33', ville:'Cergy-Saint-Christophe',           x:'255.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g34', ville:'Cergy-Préfecture',                 x:'335.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g35', ville:'Neuville-Université',              x:'415.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g36', ville:'Conflans-Fin-d&apos;Oise',         x:'495.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g37', ville:'Achères-Ville',                    x:'575.5',    y:'618.5',   st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g38', ville:'Maisons-Laffitte',                 x:'895.464',  y:'654.855', st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g39', ville:'Sartrouville',                     x:'975.464',  y:'654.855', st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g40', ville:'Houilles - Carrières - sur-Seine', x:'1055.464', y:'654.855', st:0, ln: 'A5', typ: 't_4' } 
  , { id:'g41', ville:'La Défense',                       x:'1295.464', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  , { id:'g42', ville:'Charles de Gaulle - Étoile',       x:'1375.464', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  , { id:'g43', ville:'Auber',                            x:'1455.462', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  , { id:'g44', ville:'Châtelet - Les Halles',            x:'1535.464', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  , { id:'g45', ville:'Gare de Lyon',                     x:'1615.464', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  , { id:'g46', ville:'Nation',                           x:'1695.464', y:'767.255', st:0, ln: 'A',  typ: 't_2' } 
  ];
const garesSVG  = document.getElementById('garesRER')
  ;
(function()
  {
  const parserDOM = new DOMParser()
    ,   types = { t_1: { cl:'gareB gare-bot', tr:40   } 
                , t_2: { cl:'gareB gare-top', tr:-30  } 
                , t_3: { cl:'gareN gare-top', tr:-120 } 
                , t_4: { cl:'gareN gare-top', tr:-30  } 
                };
  for(let gare of gares)
    {
    let pth = (gare.typ=='t_3')? '\n<path d="M0 0v-100"></path>' : ''
      , grp = 
`<?xml version="1.0" encoding="UTF-8"?>
<document xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
<svg xmlns="http://www.w3.org/2000/svg" id="container" > 
  <g id="${gare.id}" class="${types[gare.typ].cl}" transform="translate(${gare.x} ${gare.y})">${pth}
  <circle cx="0" cy="0" r="10"></circle>
  <text x="0" y="0" transform="translate(7,${types[gare.typ].tr}) rotate(-60)">${gare.ville}</text>
</g></svg></document>`
      ;
    garesSVG.appendChild( parserDOM.parseFromString( grp, 'image/svg+xml').getElementById(gare.id) );
  } }
)();
 
const gareStatus = [ 'white', 'green', 'orange', 'red' ]
  ;
garesSVG.onclick =e=>
  {
  if (!e.target.parentNode.matches('g.gareB')) return
 
  let eCircle = e.target.parentNode.getElementsByTagName('circle')[0]
    , gare    = gares.find(g=>g.id===e.target.parentNode.id )
    ;
  gare.st = ++gare.st %4
  eCircle.setAttributeNS(null, 'style', `fill:${gareStatus[gare.st]}`)
  }
</script>
</body>
</html>

ps: j'ai ah=ajouté ke truc de changement de couleur quand on clique sur une gare ou son libellé

**jean mich jean mich** · 09/04/2020, 11h59

Je viens de finir la carte mais j'ai une petite question :

J'aimerais créer un bouton qui enverrais vers un mot de passe et activerais la possibilité de modifier les actions suivantes :

- modifications couleur cercles au clic (code js)

- modification contenu texte avec cette ligne js

Code HTML :

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

<a href="javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200">Modifier date de Début et/ou de Fin de travaux</a>

Facile à faire ?

Création carte RER A - onclick - circle - MotdP

JavaScript

Vue hybride

Discussions similaires

Partager

Partager