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