Zoomer un SVG

**apdf1** · 03/01/2019, 13h02

Bonjour,

Après plusieurs recherche sans trop trouver exactement.
J'aimerai zoomer un Svg, je 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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8" />
	<title>Côte d'Or</title>
	<meta name="Author" content="Max V.">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="../../../js/jquery-3.3.1.min.js"></script>
	<script src="../../../js/Ephemeride.js"></script>
	<script src="../../../js/liste_deroulante.js"></script>
	<link rel="stylesheet" href="../../../css/index.css">
 
    <style>
    #titre {
        position: absolute;
        top: 10px;
        left: 160px;
        color: #363434;
        font-weight: bold;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4), -1px -2px 0 rgba(255, 255, 255, 1);
        font-size: 70px;
        border: solid 0px #fff;
        width: 600px;
        height: 60px;
    }
    svg.map__image {
        position: absolute;
        top: 90px;
        left: 20px;
        border: 1px solid red;
        /*cadre rouge autour de la carte*/
        width: 990px;
        height: 730px;
        margin: 0px;
    }
    svg.map__image path {
        fill: #19191f;
        stroke: #cc4646;
        stroke-width: 0.5;
        /*Séparation carte*/
        transition: fill 0.1s;
    }
    svg.map__image g:hover path {
        fill: #0000FF;
        stroke: #cc4646;
    }
    svg.map__image text {
        fill: #e8e809;
        font-size: 16px;
        /*taille sans hover*/
        font-style: italic;
    }
    svg.map__image g:hover text {
        fill: #fdfefe;
        font-weight: bold;
        font-size: 16px;
        /*taille avec hover*/
        font-style: italic;
    }
    #ligne_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
    }
    #tadiv {
        position: absolute;
        top: 95px;
        left: 850px;
        display: block;
        height: 190px;
        /*Hauteur liste des régions*/
        width: 80px;
        background-color: transparent;
    }
    .scrollbar3 {
        margin-left: 30px;
        float: left;
        height: 200px;
        width: 160px;
        background: #050505;
        overflow-y: scroll !important;
        /*définie l'overflow vertical*/
        overflow-x: hidden !important;
        /*définie l'overflow horizontal.*/
        margin-bottom: 25px;
    }
    #style-3::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar {
        width: 10px;
        /*largeur de la scroll*/
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #D62929;
    }
    /* fin scrollbar des Régions */
    .exposant {
        font-size: 12px;
    }
    .img_info {
        position: absolute;
        top: 615px;
        left: 705px;
    }
    .img_info_cir {
        position: absolute;
        top: 655px;
        left: 875px;
    }
</style>
</head>
 
    <body>
 
    	<div class="map" id="map">
		<div class="map__image">
			<!-- Fin Afficher et masquer nom sur la carte -->
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="130 50 800 800" class="map__image">
 
 
                <g data-description="Ahuy<br> 12,36 Km² <br>45 875 habitants"><a id="region-01" xlink:href="#" data-img="img1"data-txt=" Ahuy">
                <path id="01" title="Ahuy" d="M412.7,295.2 411.5,286.3 413.9,282.9 408.2,276.2 403.9,274.5 395.1,277.1 391.1,275 398.9,290.5 401.6,290.6 409.8,293.7 410.5,295.9 "/>
                    </a></g>
                <g data-description="Asnieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-02" xlink:href="#.html" data-img="img2"data-txt=" Asnieres Les Dijon">
                <path id="02" title="Asnieres Les Dijon" d="M418.5,279.4 423.8,270.2 419.9,267.4 418.2,263.2 413.4,263.5 408.2,276.2 413.9,282.9 "/>
                    </a></g>
                <g data-description="Bellefond<br> 0,00 Km² <br>0 habitants"><a id="region-03" xlink:href="#.html" data-img="img3"data-txt=" Bellefond">
                <path id="03" title="Bellefond" d="M431,272.2 427.2,273.4 423.8,270.2 418.5,279.4 420.6,283 424.9,285 432.1,272.8 "/>
                    </a></g>
                <g data-description="Corcelles Les Monts<br> 0,00 Km² <br>0 habitants"><a id="region-04" xlink:href="#.html" data-img="img4"data-txt=" Corcelles Les Monts">
                <path id="04" title="Corcelles Les Monts" d="M363.7,348.3 372.8,337.8 379.2,335.1 383.2,330.7 379.8,328.1 377.8,322.2 368.9,319.2 364.1,314.2 361.9,315.2 357,323.2 351.1,326 352.3,332.6 350.9,337.1 361.2,342 363.4,348.4 "/>
                    </a></g>
                <g data-description="Daix<br> 0,00 Km² <br>0 habitants"><a id="region-05" xlink:href="#.html" data-img="img5"data-txt=" Daix">
                <path id="05" title="Daix" d="M401.6,290.6 398.9,290.5 389.1,291.8 383.4,287.2 371.6,283.5 367.2,277.9 364.1,274.2 359.2,290.4 361.9,294.4 371,295.1 381.1,299.9 384.2,296.3 394.1,303.1 398.8,302 "/>
                    </a></g>
                <g data-description="Darois<br> 0,00 Km² <br>0 habitants"><a id="region-06" xlink:href="darois_cantons.html" data-img="img6"data-txt=" Darois">
                <path id="06" title="Darois" d="M376,268.9 357.4,262.4 350.4,265.2 350.1,253.1 343.7,258.6 343,262.7 344.2,266.9 364.1,274.2 367.2,277.9 368.9,279.6 371.1,278.6 376.9,274.4 380.7,268.3 "/>
                    </a></g>
                <g data-description="Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-07" xlink:href="dijon_cantons.html" data-img="img7"data-txt=" Dijon">
                <path id="07" title="Dijon" d="M437.1,337.9 440.8,332.1 442.9,329.8 435.2,325.9 434.3,323.9 436.5,320.3 429.8,318.2 427.4,305 433.7,298.4 427.1,296.2 420.4,289.5 420.6,283 418.5,279.4 413.9,282.9 411.5,286.3 412.7,295.2 410.5,295.9 412.3,307.2 405.6,308.9 402,306 398.6,316.8 390.8,312.1 377.3,314.8 376.2,316.9 379.4,320.4 377.8,322.2 379.8,328.1 383.2,330.7 394.6,333.1 401.5,332.3 407.6,335.6 420.9,332.5 437.2,342.5 "/>
                    </a></g>
                <g data-description="Etaules<br> 0,00 Km² <br>0 habitants"><a id="region-08" xlink:href="etaules_cantons.html" data-img="img8"data-txt=" Etaules">
                <path id="08" title="Etaules" d="M383.5,265.4 389.7,262.1 389.7,257.8 374.8,246.1 373.1,241.8 366.3,243.1 350.1,253.1 350.4,265.2 357.4,262.4 376,268.9 380.7,268.3 "/>
                    </a></g>
                <g data-description="Flavignerot<br> 0,00 Km² <br>0 habitants"><a id="region-09" xlink:href="flavignerot_cantons.html" data-img="img9"data-txt=" Flavignerot">
                <path id="09" title="Flavignerot" d="M348.2,355.9 359.6,356.6 363.4,348.4 361.2,342 350.9,337.1 347.3,347.9 343.6,350 343.2,350.5 344.9,359 "/>
                    </a></g>
                <g data-description="Fleurey Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-10" xlink:href="fleurey_sur_ouche_cantons.html" data-img="img10"data-txt=" Fleurey Sur Ouche">
                <path id="10" title="Fleurey Sur Ouche" d="M343.6,350 346.7,338.9 340.2,313.6 323.3,312.6 317.9,317.2 315.8,316 309.7,328.4 305.4,326.4 304.2,328.3 307.3,333.8 304.5,337.3 309.1,341.9 313.6,341.8 316.5,347.7 323.3,348.4 324.5,352.7 326.6,353.7 330.3,351.4 333.1,354.7 343.2,350.5 "/>
                    </a></g>
                <g data-description="Fontaine Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-11" xlink:href="fontaine_les_dijon_cantons.html" data-img="img11"data-txt=" Fontaine Les Dijon">
                <path id="11" title="Fontaine Les Dijon" d="M409.8,293.7 401.6,290.6 398.8,302 402,306 405.6,308.9 412.3,307.2 410.5,295.9 "/>
                    </a></g>
                <g data-description="Hauteville Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-12" xlink:href="hauteville_les_dijon_cantons.html" data-img="img12"data-txt=" Hauteville Les Dijon">
                <path id="12" title="Hauteville Les Dijon" d="M391.1,275 384.5,269.6 383.5,265.4 380.7,268.3 376.9,274.4 371.1,278.6 368.9,279.6 367.2,277.9 371.6,283.5 383.4,287.2 389.1,291.8 398.9,290.5 "/>
                    </a></g>
                <g data-description="Lantenay<br> 0,00 Km² <br>0 habitants"><a id="region-13" xlink:href="lantenay_cantons.html" data-img="img13"data-txt=" Lantenay">
                <path id="13" title="Lantenay" d="M345,305.4 350.1,298.7 347.5,295.3 343.2,296.6 335.2,288.8 330.9,294.6 308.7,293.8 308.4,301 314.4,308.8 315.8,316 317.9,317.2 323.3,312.6 340.2,313.6 "/>
                    </a></g>
                <g data-description="Messigny Et Vantoux<br> 0,00 Km² <br>0 habitants"><a id="region-14" xlink:href="messigny_et_vantoux_cantons.html" data-img="img14"data-txt=" Messigny Et Vantoux">
                <path id="14" title="Messigny Et Vantoux" d="M413.4,263.5 417.2,252 412.7,249.7 410.5,245.4 397.5,233.8 385.6,222.2 380.8,230 376,225.4 371.8,227.9 373.1,241.8 374.8,246.1 389.7,257.8 389.7,262.1 383.5,265.4 384.5,269.6 391.1,275 395.1,277.1 403.9,274.5 408.2,276.2 "/>
                    </a></g>
                <g data-description="Norges La Ville<br> 0,00 Km² <br>0 habitants"><a id="region-15" xlink:href="norges_la_ville_cantons.html" data-img="img15"data-txt=" Norges La Ville">
                <path id="15" title="Norges La Ville" d="M441.6,252.5 441.8,251.9 428.4,246.9 417.2,252 413.4,263.5 418.2,263.2 419.9,267.4 423.8,270.2 427.2,273.4 431,272.2 "/>
                    </a></g>
                <g data-description="Pasques<br> 0,00 Km² <br>0 habitants"><a id="region-16" xlink:href="pasques_cantons.html" data-img="img16"data-txt=" Pasques">
                <path id="16" title="Pasques" d="M333.9,277.4 337.3,266.5 335.5,262.4 331.3,263.5 325.4,260.6 316.7,264.7 311.1,275.1 304.7,281.2 302.4,287.8 308.7,293.8 330.9,294.6 335.2,288.8 "/>
                    </a></g>
                <g data-description="Plombieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-17" xlink:href="plombieres_les_dijon_cantons.html" data-img="img17"data-txt=" Plombieres Les Dijon">
                <path id="17" title="Plombieres Les Dijon" d="M379.4,320.4 376.2,316.9 377.3,314.8 390.8,312.1 381.1,299.9 371,295.1 361.9,294.4 356.6,298.9 347.5,295.3 350.1,298.7 345,305.4 349.7,305.8 352.3,302 354.7,302.2 356.3,303.9 355.8,308.5 361.9,315.2 364.1,314.2 368.9,319.2 377.8,322.2 "/>
                    </a></g>
                <g data-description="Prenois<br> 0,00 Km² <br>0 habitants"><a id="region-18" xlink:href="prenois_cantons.html" data-img="img18"data-txt=" Prenois">
                <path id="18" title="Prenois" d="M359.2,290.4 364.1,274.2 344.2,266.9 343,262.7 339.8,260.2 335.5,262.4 337.3,266.5 333.9,277.4 335.2,288.8 343.2,296.6 347.5,295.3 356.6,298.9 361.9,294.4 "/>
                    </a></g>
                <g data-description="Savigny Le Sec<br> 0,00 Km² <br>0 habitants"><a id="region-19" xlink:href="savigny_le_sec_cantons.html" data-img="img19"data-txt=" Savigny Le Sec">
                <path id="19" title="Savigny Le Sec" d="M428.4,246.9 427.7,238.9 418.6,235.9 415.4,232.3 405.7,232.3 397.8,226.7 397.5,233.8 410.5,245.4 412.7,249.7 417.2,252 "/>
                    </a></g>
                <g data-description="Talant<br> 0,00 Km² <br>0 habitants"><a id="region-20" xlink:href="talant_cantons.html" data-img="img20"data-txt=" Talant">
                <path id="20" title="Talant" d="M398.8,302 394.1,303.1 384.2,296.3 381.1,299.9 390.8,312.1 398.6,316.8 402,306 "/>
                    </a></g>
                <g data-description="Velars Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-21" xlink:href="velars_sur_ouche_cantons.html" data-img="img21"data-txt=" Velars Sur Ouche">
                <path id="21" title="Velars Sur Ouche"        d="M347.3,347.9 350.9,337.1 352.3,332.6 351.1,326 357,323.2 361.9,315.2 355.8,308.5 356.3,303.9 354.7,302.2 352.3,302 349.7,305.8 345,305.4 340.2,313.6 346.7,338.9 343.6,350 "/>	
                    </a></g>
 
			</svg>
 
		</div>
 
 
	</div>
 
 
	<!-- Fin Photos aux passage zone des cartes -->
	<!--Afficher keure Gmt-->
	<script src="../../../js/gmt.js"></script>
	<script src="../../../js/afficher_liste.js"></script>
</body>
 
</html>

Je vous remercie

Max

**Sodium** · 03/01/2019, 14h24

Qu'appelles-tu "zoomer" un SVG ? Un SVG est un élément de la page comme un autre, tu peux soit augmenter sa taille, soit effectuer un transform: scale dessus, bien que je suppose que dans ce cas il sera pixelisé par le navigateur et perdra en qualité.

**Doksuri** · 03/01/2019, 15h33

Envoyé par Sodium

Qu'appelles-tu "zoomer" un SVG ? Un SVG est un élément de la page comme un autre, tu peux soit augmenter sa taille, soit effectuer un transform: scale dessus, bien que je suppose que dans ce cas il sera pixelisé par le navigateur et perdra en qualité.

fr.wikipedia.org/wiki/Scalable_Vector_Graphics => c'est du vectoriel, l'interet des svg est justement de ne pas perdre en qualite quelque soit le zoom

**Sodium** · 03/01/2019, 16h23

Envoyé par Doksuri

fr.wikipedia.org/wiki/Scalable_Vector_Graphics => c'est du vectoriel, l'interet des svg est justement de ne pas perdre en qualite quelque soit le zoom

Je parlais spécifiquement de la propriété transform: scale() qui a un effet un peu particulier puisqu'elle n'agit pas sur les propriétés CSS d'un élément mais l'agrandit ou le rétrécit comme s'il s'agissait d'une image. Je suppose donc que pour effectuer cette transformation, le navigateur fait un rendu bitmap de l'élément, et que l'on perdrait donc les avantages du vectoriel mais ça reste bien entendu à vérifier.

Edit : c'est moche de downvoter les gens parce que tu n'as pas compris.
Edit 2 : après vérification sous Firefox, le SVG est bien pixelisé lors du passage d'un état à un autre mais repasse ensuite en vectoriel. En fonction du degré de changement d'échelle ainsi que de la présence ou non d'animation entre les deux états, il peut donc y avoir un rendu plus ou moins crade pendant plus ou moins de temps, à checker en fonction de ton utilisation.

**apdf1** · 03/01/2019, 17h18

Bonjour

En faite je voudrais cliquer soit sur la carte soit avec un bouton pour que la carte s'agrandisse.

Max

**Sodium** · 03/01/2019, 17h23

Ca ne va pas se faire tout seul par magie, il va falloir soit que tu trouves une librairie qui propose ce genre de fonctionnalité, soit l'implémenter toi-même.
As-tu au moins des connaissances de base en JavaScript ?

**apdf1** · 03/01/2019, 18h03

Re,

Non sinon très peut

**psychadelic** · 03/01/2019, 19h42

Le zoom se règle directement en changeant les 2 derniers paramètres du viewBox. (ce que je t'avais déjà indiqué précédemment => https://www.developpez.net/forums/d1.../#post10655290 )

**Sodium** · 03/01/2019, 20h17

Envoyé par psychadelic

Le zoom se règle directement en changeant les 2 derniers paramètres du viewBox. (ce que je t'avais déjà indiqué précédemment => https://www.developpez.net/forums/d1.../#post10655290 )

Je pense que son problème va surtout être de mettre en place l'interface pour rendre ça interactif.

Globalement c'est assez simple :
- Stocker les valeurs originales de la taille du SVG
- Ajouter des boutons zoom-in / zoom out quelque part
- Leur ajouter un événement clic qui augmente et diminue la valeur d'un multiplicateur de par exemple 0.2
- Multiplier la largeur / hauteur originale du SVG par ce multiplicateur puis l'appliquer les appliquer dans le DOM

Mais bon, quelques bases de JS ça va être tendu.

**psychadelic** · 03/01/2019, 22h29

bon actuelement il y a :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="130 50 800 800" class="map__image">et

Code css :

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

1
2
3
    svg.map__image {
        width: 990px;
        height: 730px;

ce qui signifie que le rectangle d'affichage sur un navigateur fait 990 pixels de large sur 730 pixels de haut

coté viewBox on a : viewBox="130 50 800 800", seuls les 2 derniers chiffres sont utile pour le zoom, soit 800points en largeur par 800 points en hauteur.

comme preserveAspectRatio="xMidYMid" par défaut en svg l'affichage du SVG gardera les mêmes proportions en X et Y, et comme ici c'est la hauteur qui la plus petite, l'afficheur va se débrouiller pour caser les 800 points en hauteur dans les 730 pixel, ce qui implique une réduction d'échelle de 730 / 800 soit une échelle actuelle à 0,9125

première remarque : il n'y a peu d'intéret à avoir des valeurs discordantes entre la dimmension en pixels de l'affichage et celle en "points" du SVG.

deuxieme remarque, en HTML5, les attributs xmlns et version sont superflus.

Donc à minima la ligne SVG devrait être la suivante :
<svg class="map__image" viewBox="130 50 930 730" >ce qui permet déjà d'avoir une échelle à 1 entre l'affichage et la dimensionnement du svg.

la gestion du Zoom.
Comme je l'a écrit, on joue sur les 2 deniers parametres :
quand le viewBox="130 50 1860 1460" on passe à l'échelle 1/2
quand le viewBox="130 50 465 365" on passe à l'échelle 2

bien sur, les 2 premières valeurs (qui restent à "130 50") indiquent juste les premiers point à afficher en haut à gauche, ce qui donne l'impression d'un déplacement, alors qu'en réalité c'est juste un point de référence autour duquel s'effectue la mise à l'échelle.

ce qui donne :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Zoom SVG</title>
 
  <style>
    #titre {
        position: absolute;
        top: 10px;
        left: 160px;
        color: #363434;
        font-weight: bold;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4), -1px -2px 0 rgba(255, 255, 255, 1);
        font-size: 70px;
        border: solid 0px #fff;
        width: 600px;
        height: 60px;
    }
    svg.map__image {
        position: absolute;
        top: 90px;
        left: 20px;
        border: 1px solid red;
        /*cadre rouge autour de la carte*/
        width: 990px;
        height: 730px;
        margin: 0px;
    }
    svg.map__image path {
        fill: #19191f;
        stroke: #cc4646;
        stroke-width: 0.5;
        /*Séparation carte*/
        transition: fill 0.1s;
    }
    svg.map__image g:hover path {
        fill: #0000FF;
        stroke: #cc4646;
    }
    svg.map__image text {
        fill: #e8e809;
        font-size: 16px;
        /*taille sans hover*/
        font-style: italic;
    }
    svg.map__image g:hover text {
        fill: #fdfefe;
        font-weight: bold;
        font-size: 16px;
        /*taille avec hover*/
        font-style: italic;
    }
    #ligne_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
    }
    #tadiv {
        position: absolute;
        top: 95px;
        left: 850px;
        display: block;
        height: 190px;
        /*Hauteur liste des régions*/
        width: 80px;
        background-color: transparent;
    }
    .scrollbar3 {
        margin-left: 30px;
        float: left;
        height: 200px;
        width: 160px;
        background: #050505;
        overflow-y: scroll !important;
        /*définie l'overflow vertical*/
        overflow-x: hidden !important;
        /*définie l'overflow horizontal.*/
        margin-bottom: 25px;
    }
    #style-3::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar {
        width: 10px;
        /*largeur de la scroll*/
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #D62929;
    }
    /* fin scrollbar des Régions */
    .exposant {
        font-size: 12px;
    }
    .img_info {
        position: absolute;
        top: 615px;
        left: 705px;
    }
    .img_info_cir {
        position: absolute;
        top: 655px;
        left: 875px;
    }
  </style>
</head>
 
<body>
  <div class="map" id="map">
 
      <label for="id-Zoom">Zoom : </label>
      <select id="id-Zoom">
          <option value="0.5">1/2</option>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
 
		<div class="map__image">
			<!-- Fin Afficher et masquer nom sur la carte -->
			<svg class="map__image" viewBox="130 50 930 730" >
 
                <g data-description="Ahuy<br> 12,36 Km² <br>45 875 habitants"><a id="region-01" xlink:href="#" data-img="img1"data-txt=" Ahuy">
                <path id="01" title="Ahuy" d="M412.7,295.2 411.5,286.3 413.9,282.9 408.2,276.2 403.9,274.5 395.1,277.1 391.1,275 398.9,290.5 401.6,290.6 409.8,293.7 410.5,295.9 "/>
                    </a></g>
                <g data-description="Asnieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-02" xlink:href="#.html" data-img="img2"data-txt=" Asnieres Les Dijon">
                <path id="02" title="Asnieres Les Dijon" d="M418.5,279.4 423.8,270.2 419.9,267.4 418.2,263.2 413.4,263.5 408.2,276.2 413.9,282.9 "/>
                    </a></g>
                <g data-description="Bellefond<br> 0,00 Km² <br>0 habitants"><a id="region-03" xlink:href="#.html" data-img="img3"data-txt=" Bellefond">
                <path id="03" title="Bellefond" d="M431,272.2 427.2,273.4 423.8,270.2 418.5,279.4 420.6,283 424.9,285 432.1,272.8 "/>
                    </a></g>
                <g data-description="Corcelles Les Monts<br> 0,00 Km² <br>0 habitants"><a id="region-04" xlink:href="#.html" data-img="img4"data-txt=" Corcelles Les Monts">
                <path id="04" title="Corcelles Les Monts" d="M363.7,348.3 372.8,337.8 379.2,335.1 383.2,330.7 379.8,328.1 377.8,322.2 368.9,319.2 364.1,314.2 361.9,315.2 357,323.2 351.1,326 352.3,332.6 350.9,337.1 361.2,342 363.4,348.4 "/>
                    </a></g>
                <g data-description="Daix<br> 0,00 Km² <br>0 habitants"><a id="region-05" xlink:href="#.html" data-img="img5"data-txt=" Daix">
                <path id="05" title="Daix" d="M401.6,290.6 398.9,290.5 389.1,291.8 383.4,287.2 371.6,283.5 367.2,277.9 364.1,274.2 359.2,290.4 361.9,294.4 371,295.1 381.1,299.9 384.2,296.3 394.1,303.1 398.8,302 "/>
                    </a></g>
                <g data-description="Darois<br> 0,00 Km² <br>0 habitants"><a id="region-06" xlink:href="darois_cantons.html" data-img="img6"data-txt=" Darois">
                <path id="06" title="Darois" d="M376,268.9 357.4,262.4 350.4,265.2 350.1,253.1 343.7,258.6 343,262.7 344.2,266.9 364.1,274.2 367.2,277.9 368.9,279.6 371.1,278.6 376.9,274.4 380.7,268.3 "/>
                    </a></g>
                <g data-description="Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-07" xlink:href="dijon_cantons.html" data-img="img7"data-txt=" Dijon">
                <path id="07" title="Dijon" d="M437.1,337.9 440.8,332.1 442.9,329.8 435.2,325.9 434.3,323.9 436.5,320.3 429.8,318.2 427.4,305 433.7,298.4 427.1,296.2 420.4,289.5 420.6,283 418.5,279.4 413.9,282.9 411.5,286.3 412.7,295.2 410.5,295.9 412.3,307.2 405.6,308.9 402,306 398.6,316.8 390.8,312.1 377.3,314.8 376.2,316.9 379.4,320.4 377.8,322.2 379.8,328.1 383.2,330.7 394.6,333.1 401.5,332.3 407.6,335.6 420.9,332.5 437.2,342.5 "/>
                    </a></g>
                <g data-description="Etaules<br> 0,00 Km² <br>0 habitants"><a id="region-08" xlink:href="etaules_cantons.html" data-img="img8"data-txt=" Etaules">
                <path id="08" title="Etaules" d="M383.5,265.4 389.7,262.1 389.7,257.8 374.8,246.1 373.1,241.8 366.3,243.1 350.1,253.1 350.4,265.2 357.4,262.4 376,268.9 380.7,268.3 "/>
                    </a></g>
                <g data-description="Flavignerot<br> 0,00 Km² <br>0 habitants"><a id="region-09" xlink:href="flavignerot_cantons.html" data-img="img9"data-txt=" Flavignerot">
                <path id="09" title="Flavignerot" d="M348.2,355.9 359.6,356.6 363.4,348.4 361.2,342 350.9,337.1 347.3,347.9 343.6,350 343.2,350.5 344.9,359 "/>
                    </a></g>
                <g data-description="Fleurey Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-10" xlink:href="fleurey_sur_ouche_cantons.html" data-img="img10"data-txt=" Fleurey Sur Ouche">
                <path id="10" title="Fleurey Sur Ouche" d="M343.6,350 346.7,338.9 340.2,313.6 323.3,312.6 317.9,317.2 315.8,316 309.7,328.4 305.4,326.4 304.2,328.3 307.3,333.8 304.5,337.3 309.1,341.9 313.6,341.8 316.5,347.7 323.3,348.4 324.5,352.7 326.6,353.7 330.3,351.4 333.1,354.7 343.2,350.5 "/>
                    </a></g>
                <g data-description="Fontaine Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-11" xlink:href="fontaine_les_dijon_cantons.html" data-img="img11"data-txt=" Fontaine Les Dijon">
                <path id="11" title="Fontaine Les Dijon" d="M409.8,293.7 401.6,290.6 398.8,302 402,306 405.6,308.9 412.3,307.2 410.5,295.9 "/>
                    </a></g>
                <g data-description="Hauteville Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-12" xlink:href="hauteville_les_dijon_cantons.html" data-img="img12"data-txt=" Hauteville Les Dijon">
                <path id="12" title="Hauteville Les Dijon" d="M391.1,275 384.5,269.6 383.5,265.4 380.7,268.3 376.9,274.4 371.1,278.6 368.9,279.6 367.2,277.9 371.6,283.5 383.4,287.2 389.1,291.8 398.9,290.5 "/>
                    </a></g>
                <g data-description="Lantenay<br> 0,00 Km² <br>0 habitants"><a id="region-13" xlink:href="lantenay_cantons.html" data-img="img13"data-txt=" Lantenay">
                <path id="13" title="Lantenay" d="M345,305.4 350.1,298.7 347.5,295.3 343.2,296.6 335.2,288.8 330.9,294.6 308.7,293.8 308.4,301 314.4,308.8 315.8,316 317.9,317.2 323.3,312.6 340.2,313.6 "/>
                    </a></g>
                <g data-description="Messigny Et Vantoux<br> 0,00 Km² <br>0 habitants"><a id="region-14" xlink:href="messigny_et_vantoux_cantons.html" data-img="img14"data-txt=" Messigny Et Vantoux">
                <path id="14" title="Messigny Et Vantoux" d="M413.4,263.5 417.2,252 412.7,249.7 410.5,245.4 397.5,233.8 385.6,222.2 380.8,230 376,225.4 371.8,227.9 373.1,241.8 374.8,246.1 389.7,257.8 389.7,262.1 383.5,265.4 384.5,269.6 391.1,275 395.1,277.1 403.9,274.5 408.2,276.2 "/>
                    </a></g>
                <g data-description="Norges La Ville<br> 0,00 Km² <br>0 habitants"><a id="region-15" xlink:href="norges_la_ville_cantons.html" data-img="img15"data-txt=" Norges La Ville">
                <path id="15" title="Norges La Ville" d="M441.6,252.5 441.8,251.9 428.4,246.9 417.2,252 413.4,263.5 418.2,263.2 419.9,267.4 423.8,270.2 427.2,273.4 431,272.2 "/>
                    </a></g>
                <g data-description="Pasques<br> 0,00 Km² <br>0 habitants"><a id="region-16" xlink:href="pasques_cantons.html" data-img="img16"data-txt=" Pasques">
                <path id="16" title="Pasques" d="M333.9,277.4 337.3,266.5 335.5,262.4 331.3,263.5 325.4,260.6 316.7,264.7 311.1,275.1 304.7,281.2 302.4,287.8 308.7,293.8 330.9,294.6 335.2,288.8 "/>
                    </a></g>
                <g data-description="Plombieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-17" xlink:href="plombieres_les_dijon_cantons.html" data-img="img17"data-txt=" Plombieres Les Dijon">
                <path id="17" title="Plombieres Les Dijon" d="M379.4,320.4 376.2,316.9 377.3,314.8 390.8,312.1 381.1,299.9 371,295.1 361.9,294.4 356.6,298.9 347.5,295.3 350.1,298.7 345,305.4 349.7,305.8 352.3,302 354.7,302.2 356.3,303.9 355.8,308.5 361.9,315.2 364.1,314.2 368.9,319.2 377.8,322.2 "/>
                    </a></g>
                <g data-description="Prenois<br> 0,00 Km² <br>0 habitants"><a id="region-18" xlink:href="prenois_cantons.html" data-img="img18"data-txt=" Prenois">
                <path id="18" title="Prenois" d="M359.2,290.4 364.1,274.2 344.2,266.9 343,262.7 339.8,260.2 335.5,262.4 337.3,266.5 333.9,277.4 335.2,288.8 343.2,296.6 347.5,295.3 356.6,298.9 361.9,294.4 "/>
                    </a></g>
                <g data-description="Savigny Le Sec<br> 0,00 Km² <br>0 habitants"><a id="region-19" xlink:href="savigny_le_sec_cantons.html" data-img="img19"data-txt=" Savigny Le Sec">
                <path id="19" title="Savigny Le Sec" d="M428.4,246.9 427.7,238.9 418.6,235.9 415.4,232.3 405.7,232.3 397.8,226.7 397.5,233.8 410.5,245.4 412.7,249.7 417.2,252 "/>
                    </a></g>
                <g data-description="Talant<br> 0,00 Km² <br>0 habitants"><a id="region-20" xlink:href="talant_cantons.html" data-img="img20"data-txt=" Talant">
                <path id="20" title="Talant" d="M398.8,302 394.1,303.1 384.2,296.3 381.1,299.9 390.8,312.1 398.6,316.8 402,306 "/>
                    </a></g>
                <g data-description="Velars Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-21" xlink:href="velars_sur_ouche_cantons.html" data-img="img21"data-txt=" Velars Sur Ouche">
                <path id="21" title="Velars Sur Ouche"        d="M347.3,347.9 350.9,337.1 352.3,332.6 351.1,326 357,323.2 361.9,315.2 355.8,308.5 356.3,303.9 354.7,302.2 352.3,302 349.7,305.8 345,305.4 340.2,313.6 346.7,338.9 343.6,350 "/>	
                    </a></g>
			</svg>
 		</div>
 	</div>
 
  <script>
    const SVG_elm = document.querySelector('svg.map__image');
 
    document.getElementById('id-Zoom').onchange = function() {
      let echelle = parseFloat(this.value);
      SVG_elm.setAttribute("viewBox", `130 50 ${930/echelle} ${730/echelle}`);
    }
  </script>
</body>
</html>

**apdf1** · 04/01/2019, 09h42

Bonjour psychadelic,

Je te remercie mais peut garder la carte au centre même quand elle se zoom et peut on la faire zoomer avec la molette ?

Mercie et bon WE

Max

**psychadelic** · 04/01/2019, 12h55

oui, on peut faire les deux, on peut même faire déplacer la carte avec la souris "enfoncée".

pour garder la carte au centre lors du Zoom il faut calculer le décalage de la position centrale du zoom avec le point en haut à gauche en fonction de l'échelle adoptée et l'appliquer sur les 2 premières valeurs de la viewbox.

Encore faut-il connaître cette position centrale.

Quand à la détection sur la molette de la souris, c'est pas encore standard web,

mais il y a des progres -> https://developer.mozilla.org/en-US/...API/WheelEvent
sinon, ça fait un peu de code en plus -> https://embed.plnkr.co/plunk/skVoXt

il y a aussi un polyfill => https://gist.github.com/SebLambla/f3...bb552d9e320954

pour déplacer la carte j'avais déjà montré 'opération => https://www.developpez.net/forums/d1.../#post10469761

**apdf1** · 04/01/2019, 19h35

Bonsoir

Voila j'ai essayer de suivre les consignes et j'ai modifier suivant mon idée pour obtenir ceci:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Zoom SVG</title>
 
  <style>
      body{background: #fff;}
    #titre {
        position: absolute;
        top: 10px;
        left: 160px;
        color: #363434;
        font-weight: bold;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4), -1px -2px 0 rgba(255, 255, 255, 1);
        font-size: 70px;
        border: solid 0px #fff;
        width: 600px;
        height: 60px;
    }
    svg.map__image {
        position: absolute;
        top: 90px;
        left: 20px;
        border: 1px solid red;
        /*cadre rouge autour de la carte*/
        width: 990px;
        height: 730px;
        margin: 0px;
    }
    svg.map__image path {
        fill: #19191f;
        stroke: #cc4646;
        stroke-width: 0.5;
        /*Séparation carte*/
        transition: fill 0.1s;
    }
    svg.map__image g:hover path {
        fill: #0000FF;
        stroke: #cc4646;
    }
    svg.map__image text {
        fill: #e8e809;
        font-size: 16px;
        /*taille sans hover*/
        font-style: italic;
    }
    svg.map__image g:hover text {
        fill: #fdfefe;
        font-weight: bold;
        font-size: 16px;
        /*taille avec hover*/
        font-style: italic;
    }
    #ligne_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
    }
    #tadiv {
        position: absolute;
        top: 95px;
        left: 850px;
        display: block;
        height: 190px;
        /*Hauteur liste des régions*/
        width: 80px;
        background-color: transparent;
    }
    .scrollbar3 {
        margin-left: 30px;
        float: left;
        height: 200px;
        width: 160px;
        background: #050505;
        overflow-y: scroll !important;
        /*définie l'overflow vertical*/
        overflow-x: hidden !important;
        /*définie l'overflow horizontal.*/
        margin-bottom: 25px;
    }
    #style-3::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar {
        width: 10px;
        /*largeur de la scroll*/
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #D62929;
    }
    /* fin scrollbar des Régions */
    .exposant {
        font-size: 12px;
    }
    .img_info {
        position: absolute;
        top: 615px;
        left: 705px;
    }
    .img_info_cir {
        position: absolute;
        top: 655px;
        left: 875px;
    }
  </style>
 
</head>
 
<body>
 
    <span class="bt_texte" id="bouton_texte" >Zoomer</span> 
 
 
  <div class="map" id="map">
 
<!--
      <label for="id-Zoom">Zoom : </label>
      <select id="id-Zoom">
          <option value="1" selected>1</option>
          <option value="3">2</option>
      </select>
-->
 
 
		<div class="map__image">
			<!-- Fin Afficher et masquer nom sur la carte -->
			<svg class="map__image" viewBox="-100 -60 930 730" >
 
                <g data-description="Ahuy<br> 12,36 Km² <br>45 875 habitants"><a id="region-01" xlink:href="#" data-img="img1"data-txt=" Ahuy">
                <path id="01" title="Ahuy" d="M412.7,295.2 411.5,286.3 413.9,282.9 408.2,276.2 403.9,274.5 395.1,277.1 391.1,275 398.9,290.5 401.6,290.6 409.8,293.7 410.5,295.9 "/>
                    </a></g>
                <g data-description="Asnieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-02" xlink:href="#.html" data-img="img2"data-txt=" Asnieres Les Dijon">
                <path id="02" title="Asnieres Les Dijon" d="M418.5,279.4 423.8,270.2 419.9,267.4 418.2,263.2 413.4,263.5 408.2,276.2 413.9,282.9 "/>
                    </a></g>
                <g data-description="Bellefond<br> 0,00 Km² <br>0 habitants"><a id="region-03" xlink:href="#.html" data-img="img3"data-txt=" Bellefond">
                <path id="03" title="Bellefond" d="M431,272.2 427.2,273.4 423.8,270.2 418.5,279.4 420.6,283 424.9,285 432.1,272.8 "/>
                    </a></g>
                <g data-description="Corcelles Les Monts<br> 0,00 Km² <br>0 habitants"><a id="region-04" xlink:href="#.html" data-img="img4"data-txt=" Corcelles Les Monts">
                <path id="04" title="Corcelles Les Monts" d="M363.7,348.3 372.8,337.8 379.2,335.1 383.2,330.7 379.8,328.1 377.8,322.2 368.9,319.2 364.1,314.2 361.9,315.2 357,323.2 351.1,326 352.3,332.6 350.9,337.1 361.2,342 363.4,348.4 "/>
                    </a></g>
                <g data-description="Daix<br> 0,00 Km² <br>0 habitants"><a id="region-05" xlink:href="#.html" data-img="img5"data-txt=" Daix">
                <path id="05" title="Daix" d="M401.6,290.6 398.9,290.5 389.1,291.8 383.4,287.2 371.6,283.5 367.2,277.9 364.1,274.2 359.2,290.4 361.9,294.4 371,295.1 381.1,299.9 384.2,296.3 394.1,303.1 398.8,302 "/>
                    </a></g>
                <g data-description="Darois<br> 0,00 Km² <br>0 habitants"><a id="region-06" xlink:href="darois_cantons.html" data-img="img6"data-txt=" Darois">
                <path id="06" title="Darois" d="M376,268.9 357.4,262.4 350.4,265.2 350.1,253.1 343.7,258.6 343,262.7 344.2,266.9 364.1,274.2 367.2,277.9 368.9,279.6 371.1,278.6 376.9,274.4 380.7,268.3 "/>
                    </a></g>
                <g data-description="Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-07" xlink:href="dijon_cantons.html" data-img="img7"data-txt=" Dijon">
                <path id="07" title="Dijon" d="M437.1,337.9 440.8,332.1 442.9,329.8 435.2,325.9 434.3,323.9 436.5,320.3 429.8,318.2 427.4,305 433.7,298.4 427.1,296.2 420.4,289.5 420.6,283 418.5,279.4 413.9,282.9 411.5,286.3 412.7,295.2 410.5,295.9 412.3,307.2 405.6,308.9 402,306 398.6,316.8 390.8,312.1 377.3,314.8 376.2,316.9 379.4,320.4 377.8,322.2 379.8,328.1 383.2,330.7 394.6,333.1 401.5,332.3 407.6,335.6 420.9,332.5 437.2,342.5 "/>
                    </a></g>
                <g data-description="Etaules<br> 0,00 Km² <br>0 habitants"><a id="region-08" xlink:href="etaules_cantons.html" data-img="img8"data-txt=" Etaules">
                <path id="08" title="Etaules" d="M383.5,265.4 389.7,262.1 389.7,257.8 374.8,246.1 373.1,241.8 366.3,243.1 350.1,253.1 350.4,265.2 357.4,262.4 376,268.9 380.7,268.3 "/>
                    </a></g>
                <g data-description="Flavignerot<br> 0,00 Km² <br>0 habitants"><a id="region-09" xlink:href="flavignerot_cantons.html" data-img="img9"data-txt=" Flavignerot">
                <path id="09" title="Flavignerot" d="M348.2,355.9 359.6,356.6 363.4,348.4 361.2,342 350.9,337.1 347.3,347.9 343.6,350 343.2,350.5 344.9,359 "/>
                    </a></g>
                <g data-description="Fleurey Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-10" xlink:href="fleurey_sur_ouche_cantons.html" data-img="img10"data-txt=" Fleurey Sur Ouche">
                <path id="10" title="Fleurey Sur Ouche" d="M343.6,350 346.7,338.9 340.2,313.6 323.3,312.6 317.9,317.2 315.8,316 309.7,328.4 305.4,326.4 304.2,328.3 307.3,333.8 304.5,337.3 309.1,341.9 313.6,341.8 316.5,347.7 323.3,348.4 324.5,352.7 326.6,353.7 330.3,351.4 333.1,354.7 343.2,350.5 "/>
                    </a></g>
                <g data-description="Fontaine Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-11" xlink:href="fontaine_les_dijon_cantons.html" data-img="img11"data-txt=" Fontaine Les Dijon">
                <path id="11" title="Fontaine Les Dijon" d="M409.8,293.7 401.6,290.6 398.8,302 402,306 405.6,308.9 412.3,307.2 410.5,295.9 "/>
                    </a></g>
                <g data-description="Hauteville Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-12" xlink:href="hauteville_les_dijon_cantons.html" data-img="img12"data-txt=" Hauteville Les Dijon">
                <path id="12" title="Hauteville Les Dijon" d="M391.1,275 384.5,269.6 383.5,265.4 380.7,268.3 376.9,274.4 371.1,278.6 368.9,279.6 367.2,277.9 371.6,283.5 383.4,287.2 389.1,291.8 398.9,290.5 "/>
                    </a></g>
                <g data-description="Lantenay<br> 0,00 Km² <br>0 habitants"><a id="region-13" xlink:href="lantenay_cantons.html" data-img="img13"data-txt=" Lantenay">
                <path id="13" title="Lantenay" d="M345,305.4 350.1,298.7 347.5,295.3 343.2,296.6 335.2,288.8 330.9,294.6 308.7,293.8 308.4,301 314.4,308.8 315.8,316 317.9,317.2 323.3,312.6 340.2,313.6 "/>
                    </a></g>
                <g data-description="Messigny Et Vantoux<br> 0,00 Km² <br>0 habitants"><a id="region-14" xlink:href="messigny_et_vantoux_cantons.html" data-img="img14"data-txt=" Messigny Et Vantoux">
                <path id="14" title="Messigny Et Vantoux" d="M413.4,263.5 417.2,252 412.7,249.7 410.5,245.4 397.5,233.8 385.6,222.2 380.8,230 376,225.4 371.8,227.9 373.1,241.8 374.8,246.1 389.7,257.8 389.7,262.1 383.5,265.4 384.5,269.6 391.1,275 395.1,277.1 403.9,274.5 408.2,276.2 "/>
                    </a></g>
                <g data-description="Norges La Ville<br> 0,00 Km² <br>0 habitants"><a id="region-15" xlink:href="norges_la_ville_cantons.html" data-img="img15"data-txt=" Norges La Ville">
                <path id="15" title="Norges La Ville" d="M441.6,252.5 441.8,251.9 428.4,246.9 417.2,252 413.4,263.5 418.2,263.2 419.9,267.4 423.8,270.2 427.2,273.4 431,272.2 "/>
                    </a></g>
                <g data-description="Pasques<br> 0,00 Km² <br>0 habitants"><a id="region-16" xlink:href="pasques_cantons.html" data-img="img16"data-txt=" Pasques">
                <path id="16" title="Pasques" d="M333.9,277.4 337.3,266.5 335.5,262.4 331.3,263.5 325.4,260.6 316.7,264.7 311.1,275.1 304.7,281.2 302.4,287.8 308.7,293.8 330.9,294.6 335.2,288.8 "/>
                    </a></g>
                <g data-description="Plombieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-17" xlink:href="plombieres_les_dijon_cantons.html" data-img="img17"data-txt=" Plombieres Les Dijon">
                <path id="17" title="Plombieres Les Dijon" d="M379.4,320.4 376.2,316.9 377.3,314.8 390.8,312.1 381.1,299.9 371,295.1 361.9,294.4 356.6,298.9 347.5,295.3 350.1,298.7 345,305.4 349.7,305.8 352.3,302 354.7,302.2 356.3,303.9 355.8,308.5 361.9,315.2 364.1,314.2 368.9,319.2 377.8,322.2 "/>
                    </a></g>
                <g data-description="Prenois<br> 0,00 Km² <br>0 habitants"><a id="region-18" xlink:href="prenois_cantons.html" data-img="img18"data-txt=" Prenois">
                <path id="18" title="Prenois" d="M359.2,290.4 364.1,274.2 344.2,266.9 343,262.7 339.8,260.2 335.5,262.4 337.3,266.5 333.9,277.4 335.2,288.8 343.2,296.6 347.5,295.3 356.6,298.9 361.9,294.4 "/>
                    </a></g>
                <g data-description="Savigny Le Sec<br> 0,00 Km² <br>0 habitants"><a id="region-19" xlink:href="savigny_le_sec_cantons.html" data-img="img19"data-txt=" Savigny Le Sec">
                <path id="19" title="Savigny Le Sec" d="M428.4,246.9 427.7,238.9 418.6,235.9 415.4,232.3 405.7,232.3 397.8,226.7 397.5,233.8 410.5,245.4 412.7,249.7 417.2,252 "/>
                    </a></g>
                <g data-description="Talant<br> 0,00 Km² <br>0 habitants"><a id="region-20" xlink:href="talant_cantons.html" data-img="img20"data-txt=" Talant">
                <path id="20" title="Talant" d="M398.8,302 394.1,303.1 384.2,296.3 381.1,299.9 390.8,312.1 398.6,316.8 402,306 "/>
                    </a></g>
                <g data-description="Velars Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-21" xlink:href="velars_sur_ouche_cantons.html" data-img="img21"data-txt=" Velars Sur Ouche">
                <path id="21" title="Velars Sur Ouche"        d="M347.3,347.9 350.9,337.1 352.3,332.6 351.1,326 357,323.2 361.9,315.2 355.8,308.5 356.3,303.9 354.7,302.2 352.3,302 349.7,305.8 345,305.4 340.2,313.6 346.7,338.9 343.6,350 "/>	
                    </a></g>
			</svg>
 		</div>
 	</div>
 
<!--
  <script>
    const SVG_elm = document.querySelector('svg.map__image');
 
    document.getElementById('id-Zoom').onchange = function() {
      let echelle = parseFloat(this.value);
      SVG_elm.setAttribute("viewBox", `130 50 ${930/echelle} ${730/echelle}`);
    }
  </script>
-->
 
  <script>
    const SVG_elm = document.querySelector('svg.map__image');
 
      document.getElementById('bouton_texte').onclick = function()
//      document.getElementById('bouton_texte').onmouseover = function()
    {
          this.innerHTML = (document.getElementById('bouton_texte').innerHTML == "Dézoomer")? "Zoomer":"Dézoomer";
          if(this.innerHTML=="Zoomer")
            {
                postMessage("test");
                let echelle = 1;
                SVG_elm.setAttribute("viewBox", `-100 -60 ${930/echelle} ${730/echelle}`);
            }
        else if(this.innerHTML=="Dézoomer")
            {
                let echelle = 2.5;
                SVG_elm.setAttribute("viewBox", `180 130 ${930/echelle} ${730/echelle}`);
            }
    }
  </script>
</body>
</html>

Je sais pas si j'ai bien ?

J’attends les conseils!!!!!!

Max

**psychadelic** · 04/01/2019, 23h50

heu, comment dire, tu a la programmation alambiquée

d'apres mes calcul ton dessin occupe horizontalement un espace entre les position 332 et 475; et verticalement entre 221 et 359.
ce qui nous donne comme centre horizontal la position 403.5 et verticalement 290.

Quelque soit l'échelle affichée il faut donc que ce centre de ton dessin corresponde au centre de l'affichage.
donc ça donne comme page html/css/JS :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Zoom SVG</title>
 
  <style>
      body{background: #fff;}
    #titre {
        position: absolute;
        top: 10px;
        left: 160px;
        color: #363434;
        font-weight: bold;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4), -1px -2px 0 rgba(255, 255, 255, 1);
        font-size: 70px;
        border: solid 0px #fff;
        width: 600px;
        height: 60px;
    }
    svg.map__image {
        position: absolute;
        top: 90px;
        left: 20px;
        border: 1px solid red;
        /*cadre rouge autour de la carte*/
        width: 990px;
        height: 730px;
        margin: 0px;
    }
    svg.map__image path {
        fill: #19191f;
        stroke: #cc4646;
        stroke-width: 0.5;
        /*Séparation carte*/
        transition: fill 0.1s;
    }
    svg.map__image g:hover path {
        fill: #0000FF;
        stroke: #cc4646;
    }
    svg.map__image text {
        fill: #e8e809;
        font-size: 16px;
        /*taille sans hover*/
        font-style: italic;
    }
    svg.map__image g:hover text {
        fill: #fdfefe;
        font-weight: bold;
        font-size: 16px;
        /*taille avec hover*/
        font-style: italic;
    }
    #ligne_rouge {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #0404fc;
        stroke: #f80a13;
        stroke-miterlimit: 22.9256;
        stroke-width: 1px;
    }
    #tadiv {
        position: absolute;
        top: 95px;
        left: 850px;
        display: block;
        height: 190px;
        /*Hauteur liste des régions*/
        width: 80px;
        background-color: transparent;
    }
    .scrollbar3 {
        margin-left: 30px;
        float: left;
        height: 200px;
        width: 160px;
        background: #050505;
        overflow-y: scroll !important;
        /*définie l'overflow vertical*/
        overflow-x: hidden !important;
        /*définie l'overflow horizontal.*/
        margin-bottom: 25px;
    }
    #style-3::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar {
        width: 10px;
        /*largeur de la scroll*/
        background-color: #050505;
    }
    #style-3::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #D62929;
    }
    /* fin scrollbar des Régions */
    .exposant {
        font-size: 12px;
    }
    .img_info {
        position: absolute;
        top: 615px;
        left: 705px;
    }
    .img_info_cir {
        position: absolute;
        top: 655px;
        left: 875px;
    }
  </style>
 
</head>
 
<body>
 
  <span class="bt_texte" id="bouton_texte" >Zoomer</span> 
 
 
  <div class="map" id="map">
 
<!--
      <label for="id-Zoom">Zoom : </label>
      <select id="id-Zoom">
          <option value="1" selected>1</option>
          <option value="3">2</option>
      </select>
-->
 
		<div class="map__image">
			<!-- Fin Afficher et masquer nom sur la carte -->
			<svg class="map__image" viewBox="-61.5 -75 930 730" >
 
                <g data-description="Ahuy<br> 12,36 Km² <br>45 875 habitants"><a id="region-01" xlink:href="#" data-img="img1"data-txt=" Ahuy">
                <path id="01" title="Ahuy" d="M412.7,295.2 411.5,286.3 413.9,282.9 408.2,276.2 403.9,274.5 395.1,277.1 391.1,275 398.9,290.5 401.6,290.6 409.8,293.7 410.5,295.9 "/>
                    </a></g>
                <g data-description="Asnieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-02" xlink:href="#.html" data-img="img2"data-txt=" Asnieres Les Dijon">
                <path id="02" title="Asnieres Les Dijon" d="M418.5,279.4 423.8,270.2 419.9,267.4 418.2,263.2 413.4,263.5 408.2,276.2 413.9,282.9 "/>
                    </a></g>
                <g data-description="Bellefond<br> 0,00 Km² <br>0 habitants"><a id="region-03" xlink:href="#.html" data-img="img3"data-txt=" Bellefond">
                <path id="03" title="Bellefond" d="M431,272.2 427.2,273.4 423.8,270.2 418.5,279.4 420.6,283 424.9,285 432.1,272.8 "/>
                    </a></g>
                <g data-description="Corcelles Les Monts<br> 0,00 Km² <br>0 habitants"><a id="region-04" xlink:href="#.html" data-img="img4"data-txt=" Corcelles Les Monts">
                <path id="04" title="Corcelles Les Monts" d="M363.7,348.3 372.8,337.8 379.2,335.1 383.2,330.7 379.8,328.1 377.8,322.2 368.9,319.2 364.1,314.2 361.9,315.2 357,323.2 351.1,326 352.3,332.6 350.9,337.1 361.2,342 363.4,348.4 "/>
                    </a></g>
                <g data-description="Daix<br> 0,00 Km² <br>0 habitants"><a id="region-05" xlink:href="#.html" data-img="img5"data-txt=" Daix">
                <path id="05" title="Daix" d="M401.6,290.6 398.9,290.5 389.1,291.8 383.4,287.2 371.6,283.5 367.2,277.9 364.1,274.2 359.2,290.4 361.9,294.4 371,295.1 381.1,299.9 384.2,296.3 394.1,303.1 398.8,302 "/>
                    </a></g>
                <g data-description="Darois<br> 0,00 Km² <br>0 habitants"><a id="region-06" xlink:href="darois_cantons.html" data-img="img6"data-txt=" Darois">
                <path id="06" title="Darois" d="M376,268.9 357.4,262.4 350.4,265.2 350.1,253.1 343.7,258.6 343,262.7 344.2,266.9 364.1,274.2 367.2,277.9 368.9,279.6 371.1,278.6 376.9,274.4 380.7,268.3 "/>
                    </a></g>
                <g data-description="Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-07" xlink:href="dijon_cantons.html" data-img="img7"data-txt=" Dijon">
                <path id="07" title="Dijon" d="M437.1,337.9 440.8,332.1 442.9,329.8 435.2,325.9 434.3,323.9 436.5,320.3 429.8,318.2 427.4,305 433.7,298.4 427.1,296.2 420.4,289.5 420.6,283 418.5,279.4 413.9,282.9 411.5,286.3 412.7,295.2 410.5,295.9 412.3,307.2 405.6,308.9 402,306 398.6,316.8 390.8,312.1 377.3,314.8 376.2,316.9 379.4,320.4 377.8,322.2 379.8,328.1 383.2,330.7 394.6,333.1 401.5,332.3 407.6,335.6 420.9,332.5 437.2,342.5 "/>
                    </a></g>
                <g data-description="Etaules<br> 0,00 Km² <br>0 habitants"><a id="region-08" xlink:href="etaules_cantons.html" data-img="img8"data-txt=" Etaules">
                <path id="08" title="Etaules" d="M383.5,265.4 389.7,262.1 389.7,257.8 374.8,246.1 373.1,241.8 366.3,243.1 350.1,253.1 350.4,265.2 357.4,262.4 376,268.9 380.7,268.3 "/>
                    </a></g>
                <g data-description="Flavignerot<br> 0,00 Km² <br>0 habitants"><a id="region-09" xlink:href="flavignerot_cantons.html" data-img="img9"data-txt=" Flavignerot">
                <path id="09" title="Flavignerot" d="M348.2,355.9 359.6,356.6 363.4,348.4 361.2,342 350.9,337.1 347.3,347.9 343.6,350 343.2,350.5 344.9,359 "/>
                    </a></g>
                <g data-description="Fleurey Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-10" xlink:href="fleurey_sur_ouche_cantons.html" data-img="img10"data-txt=" Fleurey Sur Ouche">
                <path id="10" title="Fleurey Sur Ouche" d="M343.6,350 346.7,338.9 340.2,313.6 323.3,312.6 317.9,317.2 315.8,316 309.7,328.4 305.4,326.4 304.2,328.3 307.3,333.8 304.5,337.3 309.1,341.9 313.6,341.8 316.5,347.7 323.3,348.4 324.5,352.7 326.6,353.7 330.3,351.4 333.1,354.7 343.2,350.5 "/>
                    </a></g>
                <g data-description="Fontaine Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-11" xlink:href="fontaine_les_dijon_cantons.html" data-img="img11"data-txt=" Fontaine Les Dijon">
                <path id="11" title="Fontaine Les Dijon" d="M409.8,293.7 401.6,290.6 398.8,302 402,306 405.6,308.9 412.3,307.2 410.5,295.9 "/>
                    </a></g>
                <g data-description="Hauteville Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-12" xlink:href="hauteville_les_dijon_cantons.html" data-img="img12"data-txt=" Hauteville Les Dijon">
                <path id="12" title="Hauteville Les Dijon" d="M391.1,275 384.5,269.6 383.5,265.4 380.7,268.3 376.9,274.4 371.1,278.6 368.9,279.6 367.2,277.9 371.6,283.5 383.4,287.2 389.1,291.8 398.9,290.5 "/>
                    </a></g>
                <g data-description="Lantenay<br> 0,00 Km² <br>0 habitants"><a id="region-13" xlink:href="lantenay_cantons.html" data-img="img13"data-txt=" Lantenay">
                <path id="13" title="Lantenay" d="M345,305.4 350.1,298.7 347.5,295.3 343.2,296.6 335.2,288.8 330.9,294.6 308.7,293.8 308.4,301 314.4,308.8 315.8,316 317.9,317.2 323.3,312.6 340.2,313.6 "/>
                    </a></g>
                <g data-description="Messigny Et Vantoux<br> 0,00 Km² <br>0 habitants"><a id="region-14" xlink:href="messigny_et_vantoux_cantons.html" data-img="img14"data-txt=" Messigny Et Vantoux">
                <path id="14" title="Messigny Et Vantoux" d="M413.4,263.5 417.2,252 412.7,249.7 410.5,245.4 397.5,233.8 385.6,222.2 380.8,230 376,225.4 371.8,227.9 373.1,241.8 374.8,246.1 389.7,257.8 389.7,262.1 383.5,265.4 384.5,269.6 391.1,275 395.1,277.1 403.9,274.5 408.2,276.2 "/>
                    </a></g>
                <g data-description="Norges La Ville<br> 0,00 Km² <br>0 habitants"><a id="region-15" xlink:href="norges_la_ville_cantons.html" data-img="img15"data-txt=" Norges La Ville">
                <path id="15" title="Norges La Ville" d="M441.6,252.5 441.8,251.9 428.4,246.9 417.2,252 413.4,263.5 418.2,263.2 419.9,267.4 423.8,270.2 427.2,273.4 431,272.2 "/>
                    </a></g>
                <g data-description="Pasques<br> 0,00 Km² <br>0 habitants"><a id="region-16" xlink:href="pasques_cantons.html" data-img="img16"data-txt=" Pasques">
                <path id="16" title="Pasques" d="M333.9,277.4 337.3,266.5 335.5,262.4 331.3,263.5 325.4,260.6 316.7,264.7 311.1,275.1 304.7,281.2 302.4,287.8 308.7,293.8 330.9,294.6 335.2,288.8 "/>
                    </a></g>
                <g data-description="Plombieres Les Dijon<br> 0,00 Km² <br>0 habitants"><a id="region-17" xlink:href="plombieres_les_dijon_cantons.html" data-img="img17"data-txt=" Plombieres Les Dijon">
                <path id="17" title="Plombieres Les Dijon" d="M379.4,320.4 376.2,316.9 377.3,314.8 390.8,312.1 381.1,299.9 371,295.1 361.9,294.4 356.6,298.9 347.5,295.3 350.1,298.7 345,305.4 349.7,305.8 352.3,302 354.7,302.2 356.3,303.9 355.8,308.5 361.9,315.2 364.1,314.2 368.9,319.2 377.8,322.2 "/>
                    </a></g>
                <g data-description="Prenois<br> 0,00 Km² <br>0 habitants"><a id="region-18" xlink:href="prenois_cantons.html" data-img="img18"data-txt=" Prenois">
                <path id="18" title="Prenois" d="M359.2,290.4 364.1,274.2 344.2,266.9 343,262.7 339.8,260.2 335.5,262.4 337.3,266.5 333.9,277.4 335.2,288.8 343.2,296.6 347.5,295.3 356.6,298.9 361.9,294.4 "/>
                    </a></g>
                <g data-description="Savigny Le Sec<br> 0,00 Km² <br>0 habitants"><a id="region-19" xlink:href="savigny_le_sec_cantons.html" data-img="img19"data-txt=" Savigny Le Sec">
                <path id="19" title="Savigny Le Sec" d="M428.4,246.9 427.7,238.9 418.6,235.9 415.4,232.3 405.7,232.3 397.8,226.7 397.5,233.8 410.5,245.4 412.7,249.7 417.2,252 "/>
                    </a></g>
                <g data-description="Talant<br> 0,00 Km² <br>0 habitants"><a id="region-20" xlink:href="talant_cantons.html" data-img="img20"data-txt=" Talant">
                <path id="20" title="Talant" d="M398.8,302 394.1,303.1 384.2,296.3 381.1,299.9 390.8,312.1 398.6,316.8 402,306 "/>
                    </a></g>
                <g data-description="Velars Sur Ouche<br> 0,00 Km² <br>0 habitants"><a id="region-21" xlink:href="velars_sur_ouche_cantons.html" data-img="img21"data-txt=" Velars Sur Ouche">
                <path id="21" title="Velars Sur Ouche"        d="M347.3,347.9 350.9,337.1 352.3,332.6 351.1,326 357,323.2 361.9,315.2 355.8,308.5 356.3,303.9 354.7,302.2 352.3,302 349.7,305.8 345,305.4 340.2,313.6 346.7,338.9 343.6,350 "/>	
                    </a></g>
			</svg>
 		</div>
 	</div>
 
<!--
  <script>
    const SVG_elm = document.querySelector('svg.map__image');
 
    document.getElementById('id-Zoom').onchange = function() {
      let echelle = parseFloat(this.value);
      SVG_elm.setAttribute("viewBox", `130 50 ${930/echelle} ${730/echelle}`);
    }
  </script>
-->
 
  <script>
    const
      SVG_elm    = document.querySelector('svg.map__image'),
      SVG_Dessin = { centre_w : 403.5, centre_h : 290, E1_w : 930, E1_h : 730 }
      ;
 
    document.getElementById('bouton_texte').onclick = function()
    {
      let
        ZoomTxt = (this.textContent ==='Zoomer') ? 'Dézoomer' : 'Zoomer',
        echelle = (ZoomTxt==="Zoomer") ? 1 : 2.5,
        w_Pt    = SVG_Dessin.E1_w / echelle,
        h_Pt    = SVG_Dessin.E1_h / echelle,
        pos_w   = SVG_Dessin.centre_w - (w_Pt / 2),
        pos_h   = SVG_Dessin.centre_h - (h_Pt / 2)
        ;
 
      SVG_elm.setAttribute("viewBox", `${pos_w} ${pos_h} ${w_Pt} ${h_Pt}`);
 
      this.textContent = ZoomTxt;
    }
  </script>
</body>
</html>

**apdf1** · 05/01/2019, 05h12

Bonjour psychadelic,

Alors si j'ai bien compris, pour trouver le centre d'affichage dans le cas présent je doit faire:

L=930/2 - les 61.5 qui correspond au premières valeurs soit 430.5
H=730/2 - les 75 qui correspond à la deuxième valeurs soit 290

Sa veut dire que je suis obliger de changer à chaque carte les valeurs ou mettre toute les cartes à la même dimension H & L

Je te remercie

Max

**psychadelic** · 05/01/2019, 13h27

IL y a 2 centres à considérer
1- celui de l'affichage
2- celui du dessin.

celui de l'affichage change suivant l'échelle utilisée.
en échelle 1 il est à:
L=930/2 = 430.5 points du bord horizontal gauche ou droit
H=730/2 = 290 points du bord vertical haut ou bas

à l'échelle N il est a
L =(930 / N) / 2 points du bord horizontal gauche ou droit
H=(730 / N) /2 points du bord vertical haut ou bas

le dessin occupe un rectangle allant horizontalement entre les positions 332 et 475, et verticalement entre les positions 221 et 359.
le centre de ce rectangle est à la position { centre_w : 403.5, centre_h : 290 } ( w=> width <= horizontal )

par exemple lors du zoom à l’échelle 2.5, ce qui correspond à 2.5 pixel pour un point SVG.
le nombre de points SVG visibles à l'affichage sur une ligne est de 930 / 2.5 = 372 points

le centre horizontal de cette affichage est donc à 372 / 2 = 186.
à celle échelle de 2.5, pour faire coïncider ce centre horizontal avec le centre horizontal du dessin cela indique un décalage horizontal des coordonnées à 403.5 (centre_w) moins cette valeur de 186.

ce qui donne la formule

Code :

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

1
2
w_Pt    = SVG_Dessin.E1_w / echelle
pos_w   = SVG_Dessin.centre_w - (w_Pt / 2)

prend une feuille et dessine toi le truc, c'est de la géométrie simple.

ça veut dire que je suis obliger de changer à chaque carte les valeurs ou mettre toute les cartes à la même dimension H & L

à chaque redimensionnement de carte (par le zoom) le centre de l'affichage se déplace et doit être recalculé.

c'est ce que j'avais dèjà écrit plus haut :

pour garder la carte au centre lors du Zoom il faut calculer le décalage de la position centrale du zoom avec le point en haut à gauche en fonction de l'échelle adoptée et l'appliquer sur les 2 premières valeurs de la viewbox.

Encore faut-il connaître cette position centrale.

Dans la solution actuelle on considère que le le point de zoom est au centre de l'image affichée, et au centre de l'affichage .

tout est question de référence, si on utilise la souris, alors c'est la position de cette dernière qu'il faut prendre en compte, en plus de celle de la résolution par la valeur de l'échelle utilisée.

**apdf1** · 05/01/2019, 14h31

Salut psychadelic

Je te remercie je vais prendre en considération ton court de géométrie qui me seras bien utile pour suivre mon travail

Bonne journée

Max

**NoSmoking** · 07/01/2019, 11h41

Bonjour,

Envoyé par apdf1

J'aimerai zoomer un Svg,

pas sûr de bien appréhender le but recherché, s'agit-il de

1/ proposer une fonction de zoom à l'utilisateur ;
2/ agrandir à l'affichage ton SVG qui est manifestement trop petit au regard de ce que tu souhaites montrer.

• Dans le cas 1 je pense qu'il est préférable de jouer avec la largeur/hauteur de ton SVG plutôt que de toucher à la viewBox qui représente la « grille de résolution/réalisation » du SVG, à condition que celle-ci soit proprement définie.

• Dans le cas 2 il faut que tu définisse précisément la « grille de résolution/réalisation », ce qui visiblement n'est pas le cas ici.

Une rapide analyse de ton SVG, il existe des méthodes simples pour le voir, montre qu'avec une viewBox définie comme suit, viewBox="270 190 200 200", tu ne dois pas être loin de ton SVG « échelle 1 », cela reste effectivement petit pour un affichage clair.

Peut être devrais tu préciser quel est ton but final, 1 ou 2, et le cas échéant où tu récupères le code de tes SVG.

**psychadelic** · 07/01/2019, 15h21

@NoSmoking : comment peut tu dynamiquement Zoomer / dé-Zoomer une image SVG sans utiliser la viewBox ?

**Sodium** · 07/01/2019, 15h31

Envoyé par psychadelic

@NoSmoking : comment peut tu dynamiquement Zoomer / dé-Zoomer une image SVG sans utiliser la viewBox ?

En jouant sur ses propriétés CSS width/height tout simplement, c'est ce que je ferais dans un cas similaire plutôt que de faire des calculs sur la viewbox. Plus simple à animer également.

Plus exactement ce que je ferais c'est un conteneur avec une hauteur de zéro et un padding en pourcentage pour obtenir le ratio voulu plus overflow hidden, le SVG en position absolue en 100% largeur hauteur, puis j'augmenterais le pourcentage lors du zoom avec une position left et top négative pour compenser.

Zoomer un SVG

JavaScript

Discussions similaires

Partager

Partager