Zoomer un SVG

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

en jouant sur le width / height on ne fait qu'augmenter ou diminuer la surface de l'image sur l'écran.

Bien sur si le viewBox reste le même ça donne un effet de Zoom, mais je vois pas ou est l'avantage car agrandir la surface occupée à forcément un effet sur la mise en page, et au "mieux" on reste limité à la taille de l'écran, et dans ce cas la je me demande comment vous allez gérer un Zoom de 1000 fois, par exemple.

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

Avec un overflow hidden sur le parent et en compensant le décalage créé par l'agrandissement en décalant le svg comme dit précédemment.
Si tu veux ajouter une animation sur le zoom, comment fais-tu en modifiant les valeurs de la viewbox ? J'ai bien une solution en JS mais c'est tordu et pas des plus pratiques.

**NoSmoking** · 07/01/2019, 19h27

Sodium à pour ainsi dire tout dit.

Pour moi un élément SVG est conçu pour un affichage optimum, si je dois afficher un SVG en 2000 x 2000 alors la viewBox devrait être de viewBox="0 0 2000 2000", pour un meilleur rendu des détails après bien sûr le « zoom/dézoom » permet d'adapter l'élément à la page suivant le cas.
Ceci est surtout lié aux paramètres tel qu'un stroke-width:1 qui vaudrait 5 en zoom 5, l'inverse étant également vrai.

Je mets un exemple simple de ce que cela pourrait donner

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom élément SVG</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
h1 {
  color: #069;
}
#cadre {
  position: relative;
  height: 30em;
  margin: auto;
  max-width: 40em;
  border: .25em solid #FFF;
  overflow: hidden;
  box-shadow: 0 0 1em #CCC;
}
#cadre svg {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  background: #EEF;
  transform: translate(-50%,-50%);
}
  circle {
    fill: url(#fond-radial);
    stroke: #FF0;
    stroke-width: 1;
  }
 
.cde-zoom {
  display: flex;
  z-index: 100;
  position: absolute;
  top: 0;
  align-items: center;
  margin: .5em;
  padding: .25em;
  border: 1px solid #CCC;
  font-size: .8em;
  line-height: 2;
  background: rgba(255,255,255,.6);
}
  .cde-zoom label {
    padding-right: .5em;
    min-width: 4em;
    text-align: right;
  }
  .cde-zoom input[type=range] {
    width: 15em;
    margin: 0 .5em;
    padding: 0;
    cursor: pointer;
  }
  .cde-zoom input[type=range]::-ms-tooltip {
    display: none;
  }
</style>
</head>
<body>
<main>
  <h1>« Zoom » élément SVG</h1>
  <div id="cadre">
    <svg
      width="100%"
      height="100%"
      viewBox="-320 -240 640 480"
      xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialgradient id="fond-radial">
          <stop offset="0%" stop-color="#CDE"/>
          <stop offset="100%" stop-color="#444"/>
        </radialgradient>
      </defs>
      <circle cx="0" cy="0" r="100"/>
    </svg>
  <p class="cde-zoom">
    <label>Width</label>
    <input type="range" min="10" max="300" step="1" value="100">
    <label>Zoom</label>
  </p>
  </div>
</main>
<script>
var elemSVG = document.querySelector("svg");
var oRange = document.querySelector("[type=range]");
 
function handleEvent() {
  var larg = elemSVG.parentNode.clientWidth / 100;
  var scale = this.value;
  var valeur = larg * scale;
  scale += "%";
  // on pourrait mettre les valeurs en px
  elemSVG.setAttribute("height", scale);
  elemSVG.setAttribute("width", scale);
  // affichage résultat
  this.previousElementSibling.textContent = valeur.toFixed(0) + "px";
  this.nextElementSibling.textContent = scale;
}
// initialisation-action
oRange.onchange = oRange.oninput = handleEvent;
handleEvent.apply(oRange);
</script>
</body>
</html>

Le code JavaScript est de plus trivial.

Le centrage de l'élément est réalisé en CSS.

L'avantage des width/height en % est que cela reste responsive.

Il existe bien sûr une autre façon de faire en utilisant un transform:scale(x), tout autant efficace.

**psychadelic** · 08/01/2019, 16h18

Pas mal comme code, simple efficace.
Mais…
On peut effectivement gérer le zoom d’une « image » de cette manière, mais la, il s’agit de d’une image vectorielle.

Et le premier principe d’une image vectorielle c’est d’utiliser des « vecteurs » (au sens large du terme), qui par définition peuvent se placer n’importe ou sur un plan infini.

Donc croire qu’une image vectorielle doit être limité à la taille de son viewBox, ou à celle du couple [width, height] sont des erreurs.

La viewBox, comme son nom l’indique est une « boite d’affichage »
dont les 2 premiers éléments indiquent des coordonnées de positionnement pour l’affichage,
et les 2 suivants sont ceux de la surface à présenter.

Après, le SVG se débrouille pour caser tout ça dans l’affichage, en se servant du [width, height] afin de respecter une mise en page, et ne représentent en rien une dimension hypothétique de l’image.

Bon j’ai commencé à écrire du code pour mettre en musique tout ça, mais là le temps me manque, un peu de patience.

**NoSmoking** · 10/01/2019, 11h34

Tout d'abord je tiens à corriger mon code qui utilisant un centrage de l'élément grâce à une transformation n'est pas des plus judicieux attendu que l'élément SVG peut posséder ses propres transformations qui seraient de ce fait annulées. L'utilisation de transform:scale(x) devient également possible simplement.

Dans la version 1, ci dessous, le centrage est assuré par la modification des margin-top et margin-left, j'ai de plus ajouté du texte afin de voir le bon comportement de « l'effet de zoom ».

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom élément SVG</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
h1 {
  color: #069;
}
#cadre {
  position: relative;
  height: 30em;
  margin: auto;
  max-width: 40em;
  border: .25em solid #FFF;
  overflow: hidden;
  box-shadow: 0 0 1em #CCC;
}
/* v 1.0 suppression du centrage via transform */
#cadre svg {
  display: block;
  position: relative;
  background: #EEF;
}
  circle {
    fill: url(#fond-radial);
    stroke: #FF0;
    stroke-width: 1;
  }
  text {
    text-anchor:middle;
    font-size:2em;
    fill-opacity:0.3;
    stroke: #FFF;
    stroke-width:1px;
  }
 
.cde-zoom {
  display: flex;
  z-index: 100;
  position: absolute;
  top: 0;
  align-items: center;
  margin: .5em;
  padding: .25em;
  border: 1px solid #CCC;
  font-size: .8em;
  line-height: 2;
  background: rgba(255,255,255,.6);
}
  .cde-zoom label {
    padding-right: .5em;
    min-width: 4em;
    text-align: right;
  }
  .cde-zoom input[type=range] {
    width: 15em;
    margin: 0 .5em;
    padding: 0;
    cursor: pointer;
  }
  .cde-zoom input[type=range]::-ms-tooltip {
    display: none;
  }
</style>
</head>
<body>
<main>
  <h1>« Zoom » élément SVG</h1>
  <div id="cadre">
    <svg
      width="100%"
      height="100%"
      viewBox="-320 -240 640 480"
      xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="fond-radial">
          <stop offset="0%" stop-color="#CDE"/>
          <stop offset="100%" stop-color="#444"/>
        </radialGradient>
      </defs>
      <circle cx="0" cy="0" r="100"/>
      <text x="0" y=".25em">Sphére</text>
    </svg>
    <p class="cde-zoom">
      <label>Width</label>
      <input type="range" min="10" max="500" step="1" value="100">
      <label>Zoom</label>
    </p>
  </div>
</main>
<script>
var elemSVG = document.querySelector("svg");
var oRange = document.querySelector("[type=range]");
 
function handleEvent() {
  var larg = elemSVG.parentNode.clientWidth / 100;
  var scale = this.value;
  var valeur = larg * scale;
  var decal = ((100 - scale) / 2) + "%";
  scale += "%";
  // on pourrait mettre les valeurs en px
  elemSVG.setAttribute("height", scale);
  elemSVG.setAttribute("width", scale);
  // centrage élément
  elemSVG.style.left = decal;
  elemSVG.style.top = decal;
  // affichage résultat
  this.previousElementSibling.textContent = valeur.toFixed(0) + "px";
  this.nextElementSibling.textContent = scale;
}
// initialisation-action
oRange.onchange = oRange.oninput = handleEvent;
handleEvent.apply(oRange);
</script>
</body>
</html>

Ceci étant

@psychadelic :

On peut effectivement gérer le zoom d’une « image » de cette manière, mais la, il s’agit de d’une image vectorielle.

on traite bien un élément SVG et pas une image !

Donc croire qu’une image vectorielle doit être limité à la taille de son viewBox, ou à celle du couple [width, height] sont des erreurs.

Je ne vois pas en quoi cela serait une erreur. Un élément SVG peut s'étendre effectivement sur un espace infini limiter de facto par le format du média de sortie, imprimante en A0 ou page web, au final il occupera l'espace que lui octroie ce média.

Si je souhaite ne l'afficher que sur la moitié du média je n'ai pas d'autre choix que de lui dire simplement n'occupe que la moitié disponible, par exemple avec un [width:50%, height:50%], je ne tiens pas compte des possibilités qu'offre l'attribut preserveAspectRatio ce serait un autre débat..
On pourrait tout aussi bien le faire en modifiant l'attribut viewBox,à condition qu'il soit défini, mais pour moi celui-ci appartient plus au créateur du SVG qu'à l'utilisateur.

La viewBox, comme son nom l’indique est une « boite d’affichage »

Ce n'est pas que cela, elle définie le format de l'image et le système de coordonnées de mise à l'échelle.

Après, le SVG se débrouille pour caser tout ça dans l’affichage, en se servant du [width, height] afin de respecter une mise en page, et ne représentent en rien une dimension hypothétique de l’image.

pas compris le mis en gras !!!

@apdf1 : on est toujours en attente de réponses

**psychadelic** · 11/01/2019, 00h22

On est ici dans un affichage cartographique, aujourd'hui il n'utilise qu'une région, mais rien n'interdit demain de l'étendre jusqu’à la planète entière comme dans openstreetmap, par exemple.

Et dans ce cas là, non seulement la dimension indiquée dans le viewBox n'a que peu de lien celle de "l'image présentée", car on est dans une virtualité, mais il serait aussi techniquement impossible d'utiliser cette technique de zoom sur une image jpg faisant 40.000km de coté.

C'est aussi pour cette raison que j'ai utilisé le mot hypothétique : Qui repose sur une hypothèse; qui n'existe qu'à l'état d'hypothèse. Synon. conjectural, présumé, supposé...
J'aurais du utiliser le terme "virtualité", il est plus à la mode.

mais de toute façons les valeurs de largeur et de hauteur indiquées dans la viewBox sont valeur d'unité.
On à le droit de croire qu'il s'agit de pixels, mais ce n'est juste qu'une hypothèse .

**apdf1** · 11/01/2019, 06h45

Bonjour NoSmoking,

Je m'excuse de ne pas avoir répondu avant je n'étais pas chez moi.
J'ai récupéré ton deuxième code avec le texte et j'ai essayé de mettre la carte à la place mais sans succès
Voilà se que j'ai fait mais bon !!!!

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom élément SVG</title>
<meta name="Author" content="NoSmoking">
<style>
html,
body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        font: 1em/1.5 Verdana, sans-serif;
}
main {
        display: block;
        margin: auto;
        max-width: 60em;
}
h1 {
        color: #069;
}
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: 6px;
        /*taille sans hover*/
        font-style: italic;
}
svg.map__image g:hover text {
        fill: #fdfefe;
        font-weight: bold;
        font-size: 6px;
        /*taille avec hover*/
        font-style: italic;
}
#cadre {
        position: relative;
        height: 30em;
        margin: auto;
        max-width: 40em;
        border: .25em solid #FFF;
        overflow: hidden;
        box-shadow: 0 0 1em #CCC;
}
/* v 1.0 suppression du centrage via transform */
 
#cadre svg {
        display: block;
        position: relative;
        background: #EEF;
}
.cde-zoom {
        display: flex;
        z-index: 100;
        position: absolute;
        top: 0;
        align-items: center;
        margin: .5em;
        padding: .25em;
        border: 1px solid #CCC;
        font-size: .8em;
        line-height: 2;
        background: rgba(255, 255, 255, .6);
}
.cde-zoom label {
        padding-right: .5em;
        min-width: 4em;
        text-align: right;
}
.cde-zoom input[type=range] {
        width: 15em;
        margin: 0 .5em;
        padding: 0;
        cursor: pointer;
}
.cde-zoom input[type=range]::-ms-tooltip {
        display: none;
}
</style>
</head>
 
<body>
	<main>
		<h1>« Zoom » élément SVG</h1>
		<div class="map" i d="Map">
			<div class="map__image">
				<div id="cadre">
					<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-120 -100 1000 1000" class="map__image">
	<g data-description="L'Abergement Sainte Colombe<br> 0 Km² <br>0 habitants">
		<a id="region-01" xlink:href="l_abergement_sainte_colombe_cantons.html" data-img="img1" data-txt=" L'Abergement Sainte Colombe">
			<path id="01" title="L'Abergement Sainte Colombe" d="M352.8,343.5 325.5,327.9 318.6,341 287.8,325.7 291.2,318.8 297.2,322.2 306.3,294.9 302.4,276.6 307.3,265.2 320.8,259.5 332,273.8 363.1,272 376.4,296.5 405,287.2 410.9,299.6 405.7,310.7 387.9,314.1 373,324.4 360.8,324.2 355.9,333.5 " />
			<text transform="matrix(1 0 0 1 307.7061 302.2188)">
				<tspan x="10" y="6" class="texte">L'Abergement Sainte Colombe</tspan>
			</text>
		</a>
	</g>
	<g data-description="Alleriot<br> 0,00 Km² <br>0 habitants">
		<a id="region-02" xlink:href="alleriot_cantons.html" data-img="img2" data-txt=" Alleriot">
			<path id="02" title="Alleriot" d="M289.1,256.3 277.7,261.2 265.6,259.3 254.2,256.7 242,244.4 242.7,238.2 213.5,215.9 208.3,204.6 228.3,188.1 241.1,166.1 252.1,181 251.5,204.9 270,207.7 283,219 " />
			<text transform="matrix(1 0 0 1 247.0518 232.501)">
				<tspan x="5" y="0" class="texte">Alleriot</tspan>
			</text>
		</a>
	</g>
	<g data-description="Baudrieres<br> 0,00 Km² <br>0 habitants">
		<a id="region-03" xlink:href="baudrieres_cantons.html" data-img="img3" data-txt=" Baudrieres">
			<path id="03" title="Baudrieres" d="M296,521.5 276.7,488.4 271.6,484.4 258.8,486.3 268.5,436.3 293.3,430.2 311.6,412.4 322.8,418.4 345.1,406 353.5,415.2 347.4,480.7 335.4,484.1 333.4,490 341.6,506.3 330.2,521 " />
			<text transform="matrix(1 0 0 1 286.791 466.0547)">
				<tspan x="5" y="0" class="texte">Baudrieres</tspan>
			</text>
		</a>
	</g>
	<g data-description="Chatenoy En Bresse<br> 0,00 Km² <br>0 habitants">
		<a id="region-04" xlink:href="chatenoy_en_bresse_cantons.html" data-img="img4" data-txt=" Chatenoy En Bresse">
			<path id="04" title="Chatenoy En Bresse" d="M242,244.4 237.1,247.8 202.2,239.8 174.1,242 158.4,233.3 157.4,222.6 170.8,213.3 190.9,224.1 208.3,204.6 213.5,215.9 242.7,238.2 " />
			<text transform="matrix(1 0 0 1 159.208 235.29)">
				<tspan x="15" y="-3" class="texte">Chatenoy En Bresse</tspan>
			</text>
		</a>
	</g>
	<g data-description="Guerfand<br> 0,00 Km² <br>0 habitants">
		<a id="region-05" xlink:href="guerfand_cantons.html" data-img="img5" data-txt=" Guerfand">
			<path id="05" title="Guerfand" d="M363.1,272 332,273.8 320.8,259.5 327.5,230 333.3,232.4 348.7,222.7 354.8,224.4 366.4,253.5 " />
			<text transform="matrix(1 0 0 1 326.5293 252.022)">
				<tspan x="5" y="0" class="texte">Guerfand</tspan>
			</text>
		</a>
	</g>
	<g data-description="Lans<br> 0,00 Km² <br>0 habitants">
		<a id="region-06" xlink:href="lans_cantons.html" data-img="img6" data-txt=" Lans">
			<path id="06" title="Lans" d="M212.5,311.6 200.9,290.7 186.8,279 199.8,260.5 211.8,258.3 229.8,265.6 244.1,278.4 263.1,282.6 251.7,299.3 234,299.5 " />
			<text transform="matrix(1 0 0 1 220.5591 291.0635)">
				<tspan x="0" y="-5" class="texte">Lans</tspan>
			</text>
		</a>
	</g>
	<g data-description="Lessard En Bresse<br> 0,00 Km² <br>0 habitants">
		<a id="region-07" xlink:href="lessard_en_bresse_cantons.html" data-img="img7" data-txt=" Lessard En Bresse">
			<path id="07" title="Lessard En Bresse" d="M444.3,360.8 429.5,349.1 417,346.7 405.4,331.8 355.9,333.5 360.8,324.2 373,324.4 387.9,314.1 405.7,310.7 410.9,299.6 444.9,314.3 440.6,344.8 446.9,360.7 " />
			<text transform="matrix(1 0 0 1 376.0293 329.4087)">
				<tspan x="10" y="-4" class="texte">Lessard En Bresse</tspan>
			</text>
		</a>
	</g>
	<g data-description="Montcoy<br> 0,00 Km² <br>0 habitants">
		<a id="region-08" xlink:href="montcoy_cantons.html" data-img="img8" data-txt=" Montcoy">
			<path id="08" title="Montcoy" d="M307.3,265.2 300.7,255.8 289.1,256.3 283,219 293.4,194.9 293.2,175.6 321.5,203.1 327.5,230 320.8,259.5 " />
			<text transform="matrix(1 0 0 1 290.2764 232.501)">
				<tspan x="5" y="0" class="texte">Montcoy</tspan>
			</text>
		</a>
	</g>
	<g data-description="Oslon<br> 0,00 Km² <br>0 habitants">
		<a id="region-09" xlink:href="oslon_cantons.html" data-img="img9" data-txt=" Oslon">
			<path id="09" title="Oslon" d="M263.1,282.6 244.1,278.4 229.8,265.6 211.8,258.3 199.8,260.5 202.2,239.8 237.1,247.8 242,244.4 254.2,256.7 265.6,259.3 " />
			<text transform="matrix(1 0 0 1 237.9883 268.0566)">
				<tspan x="0" y="-3" class="texte">Oslon</tspan>
			</text>
		</a>
	</g>
	<g data-description="Ouroux Sur Saone<br> 0,00 Km² <br>0 habitants">
		<a id="region-10" xlink:href="ouroux_sur_saone_cantons.html" data-img="img10" data-txt=" Ouroux Sur Saone">
			<path id="10" title="Ouroux Sur Saone" d="M234.9,412.4 223.7,384.1 214.2,376.5 192.3,360.4 213.2,349 212.5,311.6 234,299.5 251.7,299.3 254,311.1 248,321.1 271.4,340.6 288.9,339.7 295.3,349.9 293.1,361.5 280.2,375.3 275.5,393.5 258.4,411.8 " />
			<text transform="matrix(1 0 0 1 216.376 362.1758)">
				<tspan x="10" y="0" class="texte">Ouroux Sur Saone</tspan>
			</text>
		</a>
	</g>
	<g data-description="Saint Christophe En Bresse<br> 0,00 Km² <br>0 habitants">
		<a id="region-11" xlink:href="saint_christophe_en_bresse_cantons.html" data-img="img11" data-txt=" Saint Christophe En Bresse">
			<path id="11" title="Saint Christophe En Bresse" d="M337.9,375.1 314.2,377.6 304.2,362.8 293.1,361.5 295.3,349.9 288.9,339.7 271.4,340.6 248,321.1 254,311.1 251.7,299.3 263.1,282.6 265.6,259.3 277.7,261.2 289.1,256.3 300.7,255.8 307.3,265.2 302.4,276.6 306.3,294.9 297.2,322.2 291.2,318.8 287.8,325.7 318.6,341 325.5,327.9 352.8,343.5 360.5,352.1 339.7,363.2 " />
			<text transform="matrix(1 0 0 1 297.9453 357.9932)">
				<tspan x="-37" y="-60" class="texte">Saint-Christophe</tspan>
				<tspan x="-30" y="-53" class="texte">en-Bresse</tspan>
			</text>
		</a>
	</g>
	<g data-description="Saint Germain Du Plain<br> 0,00 Km² <br>0 habitants">
		<a id="region-12" xlink:href="saint_germain_du_plain_cantons.html" data-img="img12" data-txt=" Saint Germain Du Plain">
			<path id="12" title="Saint Germain Du Plain" d="M250,487.4 236.4,424.8 234.9,412.4 258.4,411.8 275.5,393.5 280.2,375.3 293.1,361.5 304.2,362.8 314.2,377.6 337.9,375.1 351.1,386.3 342.7,400.5 345.1,406 322.8,418.4 311.6,412.4 293.3,430.2 268.5,436.3 258.8,486.3 " />
			<text transform="matrix(1 0 0 1 277.7275 399.127)">
				<tspan x="0" y="5" class="texte">Saint Germain Du Plain</tspan>
			</text>
		</a>
	</g>
	<g data-description="Saint Martin En Bresse<br> 0,00 Km² <br>0 habitants">
		<a id="region-13" xlink:href="saint_martin_en_bresse_cantons.html" data-img="img13" data-txt=" Saint Martin En Bresse">
			<path id="13" title="Saint Martin En Bresse" d="M405,287.2 376.4,296.5 363.1,272 366.4,253.5 354.8,224.4 348.7,222.7 333.3,232.4 327.5,230 321.5,203.1 331.6,182.9 347.5,178.6 377,159 379.8,147.4 399,139.3 416.8,146.3 428.4,142.4 437.7,174 411.4,207 415.9,229.6 410.4,240.7 401.1,256.5 414.2,277 410.6,287.6 " />
			<text transform="matrix(1 0 0 1 332.8042 196.9453)">
				<tspan x="10" y="10" class="texte">Saint Martin En Bresse</tspan>
			</text>
		</a>
	</g>
	<g data-description="Tronchy<br> 0,00 Km² <br>0 habitants">
		<a id="region-14" xlink:href="tronchy_cantons.html" data-img="img14" data-txt=" Tronchy">
			<path id="14" title="Tronchy" d="M428.4,376.8 410,378.3 405,366.7 384.6,351.6 360.5,352.1 352.8,343.5 355.9,333.5 405.4,331.8 417,346.7 429.5,349.1 444.3,360.8 " />
			<text transform="matrix(1 0 0 1 371.8467 344.7461)">
				<tspan x="10" y="0" class="texte">Tronchy</tspan>
			</text>
		</a>
	</g>
	<g data-description="Villegaudin<br> 0,00 Km² <br>0 habitants">
		<a id="region-15" xlink:href="villegaudin_cantons.html" data-img="img15" data-txt=" Villegaudin">
			<path id="15" title="Villegaudin" d="M482,223.1 448.3,241.6 429.2,245 410.4,240.7 415.9,229.6 411.4,207 437.7,174 444,183.9 438.7,201.3 469.3,220.8 472.7,215.7 " />
			<text transform="matrix(1 0 0 1 421.3457 226.2266)">
				<tspan x="5" y="0" class="texte">Villegaudin</tspan>
			</text>
		</a>
	</g>
 
    </svg>
    <p class="cde-zoom">
      <label>Width</label>
      <input type="range" min="10" max="500" step="1" value="100">
      <label>Zoom</label>
    </p>
  </div>
            </div></div>
    </main>
<script>
var elemSVG = document.querySelector("svg");
var oRange = document.querySelector("[type=range]");
 
function handleEvent() {
  var larg = elemSVG.parentNode.clientWidth / 100;
  var scale = this.value;
  var valeur = larg * scale;
  var decal = ((100 - scale) / 2) + "%";
  scale += "%";
  // on pourrait mettre les valeurs en px
  elemSVG.setAttribute("height", scale);
  elemSVG.setAttribute("width", scale);
  // centrage élément
  elemSVG.style.left = decal;
  elemSVG.style.top = decal;
  // affichage résultat
  this.previousElementSibling.textContent = valeur.toFixed(0) + "px";
  this.nextElementSibling.textContent = scale;
}
// initialisation-action
oRange.onchange = oRange.oninput = handleEvent;
handleEvent.apply(oRange);
</script>
</body>
</html>

Bonne journée

max

**NoSmoking** · 11/01/2019, 12h13

Attention il ne faut pas préciser de taille pour ton SVG dans le CSS

Code css :

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

1
2
3
4
5
6
7
8
9
10
svg.map__image {
        position: absolute;
        top: 90px;
        left: 20px;
        border: 1px solid red;
        /*cadre rouge autour de la carte*/
/*        width: 990px;    /* SUPPRIMER */
/*        height: 730px;   /* SUPPRIMER */
        margin: 0px;
}

Mais on sait toujours pas ce que tu souhaites réellement faire

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.

ainsi que

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.

sauf si tu ne peux le spécifier pour diverses raisons !

**apdf1** · 11/01/2019, 13h05

Bonjour NoSmoking

Je souhaite proposer une fonction de zoom à l'utilisateur,
mais je n'arrive pas à mettre ma carte au centre pour que le zoom se fasse au centre?

**psychadelic** · 13/01/2019, 19h37

Bon, vu que j'ai l'impression que tu galere vraiment sur ton zoom, je t'ai fait un kit SVG.

j'ai un peu perdu du temps à cause des curseurs, et aussi pour régler l'animation du zoom, et j'ai aussi du utiliser un observer JS.
En principe le code est relativement blindé, mais je garde quelques doutes...

ce kit fonctionne pour n'importe quel(s) élément(s) SVG présent(s) sur ta page, faut juste l'instancier avant ==> var tonSVG = new Kit_SVG( « valeur de ID de l’élément svg*» ),
l'objet permet de fixer ou lire la valeur du zoom (en %), et appelle une fonction extérieure en cas de changement sur le zoom (molette ou autre)

La partie "kit_svg.js":

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
const
  vBxEnum    = Object.freeze({"left":0, "top":1, "width":2, "height":3 }),  // correspond aux 4 valeurs de la viewBox SVG.
  mouseAct   = Object.freeze({"Moving_Off":0, "Sizing_Off":1, "Moving_ON":2, "Sizing_ON":3 }),
  Cursor_Off    = c=>c<2,
  Cursor_ON     = c=>c>1,
  is_Moving_Off = c=>c===0,  // ou c=>c===mouseAct.Moving_Off
  is_Sizing_Off = c=>c===1,
  is_Moving_ON  = c=>c===2,
  is_Sizing_ON  = c=>c===3,
  c_ZoneResize  = 30,         // coté du carré en bas à droite pour redimensionnement. (0=> pas de redim)
  c_Scale_Min   = 10,
  c_Scale_Max   = 300
  ;
 
class Kit_SVG {
  constructor( zID_SVG ) {
    this.$_SVG     = document.getElementById(zID_SVG);
    let t_rect     = this.$_SVG.getBoundingClientRect();
    this._viewBox  = this.$_SVG.getAttribute("viewBox").split(' ').map(v=>+v);
 
    // this._scale    =  this._viewBox[vBxEnum.width] / t_rect.width;
    this._scale = Math.round((this._viewBox[vBxEnum.width] / t_rect.width)*1000)/1000;    // tout marche ici en précision 1/1000eme
 
    // mise en cohérence de ce ratio arrondi sur la viewBox 
    this._viewBox[vBxEnum.width]  = t_rect.width  * this._scale;
    this._viewBox[vBxEnum.height] = t_rect.height * this._scale;
    this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
 
    // curseurs...
    this._Init_Cursors_Values();
    this._mouseAction       = mouseAct.Moving_Off;
    this.$_SVG.style.cursor = this._cursor[this._mouseAction];
    this._R_Mouse           = {x:0,y:0};                        // utile à le gestion evt mouse mov
 
    // calcul des coordonnées limites de la souris pour être utilisable en resizing 
    this._Zone_Rz  = { x: t_rect.width-c_ZoneResize, y: t_rect.height-c_ZoneResize };
 
    this.$_SVG.onmousedown =e=>this._mDown_evt(e);
    this.$_SVG.onmousemove =e=>this._MovingMousse(e);
    this.$_SVG.onmouseup   =e=>this._mUp_evt(e);
    this.$_SVG.onmouseout  =e=>this._mOut_evt(e);
    this.$_SVG.onwheel     =e=>this._Zooming(e);
 
    // size Observation
    // window.onresize =e=>this._Resizing();
    window.addEventListener('resize', this._Resizing.bind(this) , true ); // pour partager cette gestion d'event à d'autres
 
    let observer4Size = new MutationObserver(this._checkStyleChange.bind(this));
 
    this.svg_wh = { w:null, h:null };
    observer4Size.observe(this.$_SVG, { attributes: true });
  }
  _Init_Cursors_Values() {
    this._cursor = ['','','',''];
 
    this._cursor[0] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[0] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%231278b8' %3E`;
    this._cursor[0] += `%3Cpath d='M0,0h6l-6,6z' /%3E%3Cpath d='M16,0h-6l6,6z' /%3E%3Cpath d='M0,16h6l-6,-6z' /%3E`;
    this._cursor[0] += `%3Cpath d='M16,16h-6l6,-6z' /%3E%3Ccircle cx='8' cy='8' r='4.4' stroke='%23231F20' `;
    this._cursor[0] += `stroke-width='1' fill='transparent' /%3E%3C/svg%3E"), pointer`;
 
    this._cursor[1] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[1] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%231278b8' %3E`;
    this._cursor[1] += `%3Cpath d='M0,0h8l-8,8z' /%3E%3Cpath d='M16,16h-8l8,-8z' /%3E`;
    this._cursor[1] += `%3Cellipse cx='8' cy='8' rx='2.6' ry='6' fill='transparent' stroke='%23231F20' `;
    this._cursor[1] += `stroke-width='1' transform='rotate(45) translate(3,-8)' /%3E%3C/svg%3E"), pointer`;
 
    this._cursor[2] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[2] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%230c3046' %3E`;
    this._cursor[2] += `%3Cpath d='M0,0h6l-6,6z' /%3E%3Cpath d='M16,0h-6l6,6z' /%3E%3Cpath d='M0,16h6l-6,-6z' /%3E`;
    this._cursor[2] += `%3Cpath d='M16,16h-6l6,-6z' /%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%231278b8' `;
    this._cursor[2] += `stroke='%23231F20' stroke-width='1'/%3E%3C/svg%3E"), pointer`;
 
    this._cursor[3] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[3] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%230c3046' %3E`;
    this._cursor[3] += `%3Cpath d='M0,0h8l-8,8z' /%3E%3Cpath d='M16,16h-8l8,-8z' /%3E`;
    this._cursor[3] += `%3Cellipse cx='8' cy='8' rx='2.6' ry='6' fill='%231278b8' stroke='%23231F20' stroke-width='1' `;
    this._cursor[3] += `transform='rotate(45) translate(3,-8)' /%3E%3C/svg%3E"), pointer`;
  }
  _checkStyleChange(mutations) {
    let
      do_Resizing  = false,
      svg_elm      = this.$_SVG,
      ref_w        = this.svg_wh.w,
      ref_h        = this.svg_wh.h
      ;
    mutations.forEach(function(mutation)
    {
      if (mutation.target === svg_elm && mutation.attributeName === 'style')
      {
        if (ref_w !== svg_elm.style.width || ref_h !== svg_elm.style.height)
        {
          ref_w = svg_elm.style.width;
          ref_h = svg_elm.style.height;
          do_Resizing = true;
        }
      }
    });
    if (do_Resizing) this._Resizing();
  }
  _Resizing() {
    let t_rect     = this.$_SVG.getBoundingClientRect();
    this._Zone_Rz  = { x: t_rect.width-c_ZoneResize, y: t_rect.height-c_ZoneResize };  // zone pour curseur en mode resize
 
    this._viewBox[vBxEnum.width]  = t_rect.width  * this._scale;
    this._viewBox[vBxEnum.height] = t_rect.height * this._scale;
 
    this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
  }
  _mDown_evt(e) {
    let t_rect = this.$_SVG.getBoundingClientRect();
    if      (is_Moving_Off(this._mouseAction))  { this._mouseAction = mouseAct.Moving_ON  }
    else if (is_Sizing_Off(this._mouseAction))  { this._mouseAction = mouseAct.Sizing_ON  }
    else                                        { this._mouseAction = mouseAct.Moving_Off }
 
    this._R_Mouse = { x : e.clientX -Math.trunc(t_rect.left) , y : e.clientY -Math.trunc(t_rect.top) };
 
    this.$_SVG.style.cursor = this._cursor[this._mouseAction];
  }
  _mUp_evt(e) {
    this._mouseAction       = mouseAct.Moving_Off;
    this.$_SVG.style.cursor = this._cursor[this._mouseAction];
  }
  _mOut_evt(e) {
    let
      t_rect   = this.$_SVG.getBoundingClientRect(),
      OnMoving = Cursor_ON(this._mouseAction);
    if (OnMoving)
    {
      let MsPos = { x : e.clientX -Math.trunc(t_rect.left) , y : e.clientY -Math.trunc(t_rect.top) };
      OnMoving = !(MsPos.x<0 || MsPos.x> t_rect.width || MsPos.y<0 || MsPos.y> t_rect.height );
      if (!OnMoving)
      {
        this._mouseAction = mouseAct.Moving_Off
        this.$_SVG.style.cursor = this._cursor[this._mouseAction];
      }
    }
  }
  _MovingMousse(e) {
    //e.preventDefault();
    let
      t_rect         = this.$_SVG.getBoundingClientRect(),
      mousePos       = { x : e.clientX -Math.trunc(t_rect.left) , y : e.clientY -Math.trunc(t_rect.top)  },
      MouseInRzZone  = (mousePos.x>this._Zone_Rz.x && mousePos.y>this._Zone_Rz.y)
    ;
 
    if (Cursor_Off(this._mouseAction))
    {
      this._mouseAction       = MouseInRzZone ? mouseAct.Sizing_Off : mouseAct.Moving_Off;
      this.$_SVG.style.cursor = this._cursor[this._mouseAction];
    }
    else if (is_Moving_ON(this._mouseAction))
    {
      this._viewBox[vBxEnum.left] -= ( (mousePos.x - this._R_Mouse.x) * this._scale );
      this._viewBox[vBxEnum.top]  -= ( (mousePos.y - this._R_Mouse.y) * this._scale );
      this._R_Mouse = mousePos;
 
      this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
    }
    else if (is_Sizing_ON(this._mouseAction))
    {
      this.$_SVG.style.width  = (t_rect.width + (mousePos.x - this._R_Mouse.x)) + 'px';
      this.$_SVG.style.height = (t_rect.height + (mousePos.y - this._R_Mouse.y)) + 'px'
 
      this._R_Mouse = mousePos;
      // ensuite l'event 'reSize' (MutationObserver) se charge du reste.
    }
  }
  _Zooming(e) {   // zoom par la molette de la souris
    let
      t_rect   = this.$_SVG.getBoundingClientRect(),
      mousePos = { x: e.clientX -Math.trunc(t_rect.left), y: e.clientY -Math.trunc(t_rect.top)  },  // = centre affichage du Zoom
      graphPos = { x: 0, y: 0 },
      SensZoom = Math.sign(e.deltaY),
      ScalePercent = Math.round(100/this._scale)
      ;
 
    graphPos.x = this._viewBox[vBxEnum.left] + ( mousePos.x * this._scale );
    graphPos.y = this._viewBox[vBxEnum.top]  + ( mousePos.y * this._scale );
 
 
    if (  c_Scale_Min < ScalePercent && ScalePercent < c_Scale_Max ) 
    {
      ScalePercent += SensZoom;
      this._scale = (100 / ScalePercent).toFixed(3);
 
      this._viewBox[vBxEnum.width]  = t_rect.width  * this._scale;
      this._viewBox[vBxEnum.height] = t_rect.height * this._scale;
 
      this._viewBox[vBxEnum.left] = graphPos.x - ( mousePos.x * this._scale );
      this._viewBox[vBxEnum.top]  = graphPos.y - ( mousePos.y * this._scale );
 
      this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
 
      try { this.ZoomChanging(); }
      catch(err) { /* ignore it ! */ }
    }
  }
  get Scale () {
    return  Math.round(100/this._scale);  // echelle exprimmée en %
  }
  set Scale(zScaleCiblePercent) {
 
    if (typeof zScaleCiblePercent !='number' ) {  // isNaN(zScaleCiblePercent) 
      throw `Scale Parameter is not a type number  -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
 
    zScaleCiblePercent = Math.trunc(zScaleCiblePercent); // jamais trop prudent.
 
    if (zScaleCiblePercent < c_Scale_Min) {
      throw `Scale Parameter is < ${c_Scale_Min} -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
    if (zScaleCiblePercent > c_Scale_Max) {
      throw `Scale Parameter is > ${c_Scale_Max} -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
 
    let ScalePercent = Math.round(100/this._scale);
 
    if ( zScaleCiblePercent != ScalePercent) {
      let
        t_rect    = this.$_SVG.getBoundingClientRect(),
        CentreAff = { x: Math.round(t_rect.width/2), y: Math.round(t_rect.height/2) },  // = centre affichage du Zoom
        graphPos  = { x: 0, y: 0 },
        SensZoom  = ( zScaleCiblePercent > ScalePercent) ? +1 : -1,
        anim_ID   = null,
        that      = this
      ;
      AnimStep();
 
 
      function AnimStep()
      {
        graphPos.x = that._viewBox[vBxEnum.left] + ( CentreAff.x * that._scale );
        graphPos.y = that._viewBox[vBxEnum.top]  + ( CentreAff.y * that._scale );
 
        ScalePercent += SensZoom;
        that._scale = (100 / ScalePercent).toFixed(3);
 
        that._viewBox[vBxEnum.width]  = t_rect.width  * that._scale;
        that._viewBox[vBxEnum.height] = t_rect.height * that._scale;
 
        that._viewBox[vBxEnum.left] = graphPos.x - ( CentreAff.x * that._scale );
        that._viewBox[vBxEnum.top]  = graphPos.y - ( CentreAff.y * that._scale );
 
        that.$_SVG.setAttribute("viewBox", that._viewBox.join(' '));
 
        // à désactiver si on pref ne pas renvoyer les redim intermédiaires
        try { that.ZoomChanging(); }
        catch(err) { /* ignore it ! */ }
 
        if ( ScalePercent === zScaleCiblePercent) {
 
          // à activer si on pref ne pas renvoyer les redim intermédiaires
          //try { that.ZoomChanging(); }
          //catch(err) { /* ignore it ! */ }
 
          cancelAnimationFrame(anim_ID);
        } else {
          anim_ID = requestAnimationFrame(AnimStep);
        }
      } /// AnimStep
    }
  } 
}

exemple d'utilisation:

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
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test-kit-SVG</title>
  <meta name="Author" content="LaReineDAngleterre">
  <style>
    html { height: 100%; }
    body {
      margin: 20px 0 0 20px;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
      height: calc(100% - 20px);
    }
    p { font-size: .8em}
    svg {
      width : 70%;
      height: 70%;
      box-shadow: 0 0 1em #CCC;
      background-color: #8ed1d6;
      display: block;
      float:left;
      clear: both;
    }
    button {
      display: block;
      float:left;
      margin-right: 5px;
    }
    .bt-Zoom { width: 5.5em; padding: 0;      }
    div {
      display: block;
      float:left;
      clear: both;
      margin: 10px 0 20px 0;
      padding: 10px 20px 5px 10px;
      border: 1px solid #c3b6b6;
      border-radius: 3px;
      background-color: #e3e3e2;
    }
    div > input { width: 330px}
  </style>
</head>
<body>
 
  <h2>kit de survie SVG</h2>
  <p>Le click souris dans la surface 'SVG" permet de déplacer l'image...
  <br/>ou de redimenssionner son cadre, quand elle y est positionnée en bas à droite (le pointeur change).</P>
  <p>La molette de la souris permet Zoomer / de-Zoomer l'image à la position de la souris...
    <br/> sinon le changement d'échelle par les boutons ou curseur utilise la position centrale de l'affichage comme point de référence du zoom.
  </p>
 
  <button id='bt-zoom_100' class="bt-Zoom"> 100 % </button>
  <button id='bt-zoom_50'  class="bt-Zoom"> 50 %</button>
  <button id='bt-zoom_150' class="bt-Zoom"> 150 %</button>
 
  <button id='bt-dim70-scale1'>dim 70%, Zoom 100 %</button>
 
  <div>
    <input type="range" min="1" max="300" step="1" value="10">
    <label>Zoom</label>
  </div>
 
 
  <svg id="the-SVG" viewBox="0 0 1440 480">
    <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
  </svg>
 
  <script src="kit_svg.js" ></script>
  <script>
 
    var
      MonSVG   = new Kit_SVG('the-SVG'),
      elm_SVG  = document.getElementById('the-SVG'),
      oRange   = document.querySelector("[type=range]")
      ;
 
    
    MonSVG.ZoomChanging = function() {
      oRange.value         = MonSVG.Scale;
      oRange.nextElementSibling.textContent = MonSVG.Scale + ' %' ;
    };
 
    MonSVG.ZoomChanging();  // initialisation
 
 
    oRange.onchange = function() {
      MonSVG.Scale = parseInt(oRange.value);
    }
 
    document.getElementById("bt-zoom_100").onclick = function() { MonSVG.Scale = 100; }
    document.getElementById("bt-zoom_50").onclick  = function() { MonSVG.Scale = 50;  }
    document.getElementById("bt-zoom_150").onclick = function() { MonSVG.Scale = 150; }
 
    document.getElementById("bt-dim70-scale1").onclick = function() {
      elm_SVG.style.width  = '70%';
      elm_SVG.style.height = '70%';
      MonSVG.Scale = 100;
    }
 
  </script>
</body>
</html>

**apdf1** · 15/01/2019, 17h40

Re,

Non comme je te l'ais dit ton code est bon mais je suis entrain d'essayer de mettre mes cartes à l'intérieur.

@+ je reviens

Max

**apdf1** · 15/01/2019, 18h30

Re psychadelic,

Comment je peut changer les mesures du départ et de l'arriver?

Max

**psychadelic** · 15/01/2019, 19h27

l'objet Kit_SVG récupère automatiquement les valeurs width / height de l'élément svg instencié.
il équilibre a ce moment la la viewBox en priorisant la largeur.
soit elles sont au début dans le css, soit si elles sont dans le viewport du svg ( <svg width=".. )
et par la suite si on change les valeurs css ( soit par l'affectation d'une classe sur l'élément) soit directement en JS ( elmSVG.style.width = ... )

dans tous les cas il conserve la même valeur d'échelle sur l'image.

on peut changer ou lire aussi cette valeur de zoom sur l'instance de l'objet ( elmSVG.Scale ) exprimée en valeur de pourcentage. ( sans le signe %)

s'il y a des améliorations / modifications à apporter, fais moi signe.

**psychadelic** · 16/01/2019, 04h51

voila la version qui permet d'intégrer ta carte SVG.
(il manquait toutes les fermetures sur les path, alors je les ai rajoutées)

J'ai du changer 2 trois trucs sur le kit SVG, et il y des petits buggs sur le zoom, il ne ce centre pas complètement sur la souris. ~~sinon j'ai un plus bug bizarre sur le redimensionnement du cadre SVG, je verrai ça une autre fois.~~
J'ai aussi mis un toolTip de mon cru, parce que le tiens était en jQuery et que j'ai perdu l'habitude de penser avec cette librairie.

le fichier "kit_svg.js" ( version 18 jancier 2019 : 19h20 ) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
const
  vBxEnum    = Object.freeze({"left":0, "top":1, "width":2, "height":3 }),  // correspond aux 4 valeurs de la viewBox SVG.
  mouseAct   = Object.freeze({"Moving_Off":0, "Sizing_Off":1, "Moving_ON":2, "Sizing_ON":3 }),
  Cursor_Off    = c=>c<2,
  Cursor_ON     = c=>c>1,
  is_Moving_Off = c=>c===0,  // ou c=>c===mouseAct.Moving_Off
  is_Sizing_Off = c=>c===1,
  is_Moving_ON  = c=>c===2,
  is_Sizing_ON  = c=>c===3
  ;
 
  /* paramêtrage par défaut : 
   {
      ZoneResize : 30,    // coté du carré en bas à droite pour redimensionnement. (0=> pas de redim)
      Scale_Min  : 10,
      Scale_Max  : 300
    }
    */
 
class Kit_SVG {
  constructor( zID_SVG, param ) {
 
    this.$_SVG  = document.getElementById(zID_SVG);
 
    this._Init_param(param || {});
    this._Init_Spot();
 
    let t_rect     = this.$_SVG.getBoundingClientRect();
    this._viewBox  = this.$_SVG.getAttribute("viewBox").split(' ').map(v=>+v);
 
    this._scale    = (this._viewBox[vBxEnum.width] / t_rect.width).toFixed(4);
 
    // mise en cohérence de ce ratio arrondi sur la viewBox 
    this._viewBox[vBxEnum.width]  = Math.round(t_rect.width  * this._scale);
    this._viewBox[vBxEnum.height] = Math.round(t_rect.height * this._scale);
    this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
 
    // curseurs...
    this._Init_Cursors_Values();
    this._mouseAction       = mouseAct.Moving_Off;
    this.$_SVG.style.cursor = this._cursor[this._mouseAction];
    this._M_Mouse           = {x:0,y:0};                        // utile à le gestion evt mouse mov
    this._R_Mouse           = {x:0,y:0};                        // utile à le gestion evt mouse resize
 
    // calcul des coordonnées limites de la souris pour être utilisable en resizing 
    this._Zone_Rz  = { x: t_rect.width-this.P.ZoneResize, y: t_rect.height-this.P.ZoneResize };
 
    this.$_SVG.addEventListener('mousedown', this._evt_mouseDown.bind(this) , true );
    this.$_SVG.addEventListener('mousemove', this._evt_mouseMove.bind(this) , true );
    this.$_SVG.addEventListener('mouseup', this._evt_mouseUp.bind(this) , true );
    this.$_SVG.addEventListener('mouseout', this._evt_mouseOut.bind(this) , true );
    this.$_SVG.addEventListener('wheel', this._evt_mouseWheel.bind(this) , true );
 
    // size Observation
    // window.onresize =e=>this._evt_Resize();
    window.addEventListener('resize', this._evt_Resize.bind(this) , true ); // pour partager cette gestion d'event avec d'autres
 
    let observer4Size = new MutationObserver(this._checkStyleChange.bind(this));
 
    this.svg_wh = { w:t_rect.width+'px', h:t_rect.height+'px' };
    observer4Size.observe(this.$_SVG, { attributes: true });
  }
  _Init_param(p) {
    this.P = {
      ZoneResize : 30,    // coté du carré en bas à droite pour redimensionnement. (0=> pas de redim)
      Scale_Min  : 10,
      Scale_Max  : 300
    }
    if (typeof p==='object') {
      Object.assign(this.P , p);
    }
  }
  _Init_Cursors_Values() {
    this._cursor = ['','','',''];
 
    this._cursor[0] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[0] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%231278b8' %3E`;
    this._cursor[0] += `%3Cpath d='M0,0h6l-6,6z' /%3E%3Cpath d='M16,0h-6l6,6z' /%3E%3Cpath d='M0,16h6l-6,-6z' /%3E`;
    this._cursor[0] += `%3Cpath d='M16,16h-6l6,-6z' /%3E%3Ccircle cx='8' cy='8' r='4.4' stroke='%23231F20' `;
    this._cursor[0] += `stroke-width='1' fill='transparent' /%3E%3C/svg%3E") 7 7, pointer`;
 
    this._cursor[1] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[1] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%231278b8' %3E`;
    this._cursor[1] += `%3Cpath d='M0,0h8l-8,8z' /%3E%3Cpath d='M16,16h-8l8,-8z' /%3E`;
    this._cursor[1] += `%3Cellipse cx='8' cy='8' rx='2.6' ry='6' fill='transparent' stroke='%23231F20' `;
    this._cursor[1] += `stroke-width='1' transform='rotate(45) translate(3,-8)' /%3E%3C/svg%3E") 7 7, pointer`;
 
    this._cursor[2] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[2] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%230c3046' %3E`;
    this._cursor[2] += `%3Cpath d='M0,0h6l-6,6z' /%3E%3Cpath d='M16,0h-6l6,6z' /%3E%3Cpath d='M0,16h6l-6,-6z' /%3E`;
    this._cursor[2] += `%3Cpath d='M16,16h-6l6,-6z' /%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%231278b8' `;
    this._cursor[2] += `stroke='%23231F20' stroke-width='1'/%3E%3C/svg%3E") 8 8, pointer`;
 
    this._cursor[3] = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' `;
    this._cursor[3] += `x='0px' y='0px' width='16px' height='16px' viewbox='0 0 16 16' fill='%230c3046' %3E`;
    this._cursor[3] += `%3Cpath d='M0,0h8l-8,8z' /%3E%3Cpath d='M16,16h-8l8,-8z' /%3E`;
    this._cursor[3] += `%3Cellipse cx='8' cy='8' rx='2.6' ry='6' fill='%231278b8' stroke='%23231F20' stroke-width='1' `;
    this._cursor[3] += `transform='rotate(45) translate(3,-8)' /%3E%3C/svg%3E") 8 8, pointer`;
  }
  _Init_Spot() {
    this.spot      = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle');
    this.spot_task = 0;
 
    this.spot.setAttributeNS(null, 'cx', 0);
    this.spot.setAttributeNS(null, 'cy', 0);
    this.spot.setAttributeNS(null, 'r', 0);
    this.spot.setAttributeNS(null, 'fill', 'transparent');
 
    this.$_SVG.appendChild(this.spot);
  }
  _Spot_InOut(x,y) {
    clearTimeout(this.spot_task);
 
    this.spot.setAttributeNS(null, 'cx', x);
    this.spot.setAttributeNS(null, 'cy', y);
    this.spot.setAttributeNS(null, 'r', 5);
    this.spot.setAttributeNS(null, 'fill', 'yellow');
 
    this.spot_task = setTimeout((that) => {
      that.spot.setAttributeNS(null, 'cx', 0);
      that.spot.setAttributeNS(null, 'cy', 0);
      that.spot.setAttributeNS(null, 'r', 0);
 
      that.spot.setAttributeNS(null, 'fill', 'transparent');
 
      clearTimeout(that.spot_task);
    }, 1200, this);
  }
  _checkStyleChange(mutations) {
    let
      do_evt_Resize  = false,
      svg_elm      = this.$_SVG,
      ref_w        = this.svg_wh.w,
      ref_h        = this.svg_wh.h
      ;
    mutations.forEach(function(mutation)
    {
      // console.log('mutation attr', mutation.attributeName) // viewBox // style
 
      if (mutation.target === svg_elm && mutation.attributeName === 'style')
      {
        if (ref_w !== svg_elm.style.width || ref_h !== svg_elm.style.height)
        {
          do_evt_Resize = true;
        }
      }
    });
    this.svg_wh.w = svg_elm.style.width;
    this.svg_wh.h = svg_elm.style.height;
 
    if (do_evt_Resize) this._evt_Resize();
  }
  _evt_Resize() {
    let t_rect     = this.$_SVG.getBoundingClientRect();
    this._Zone_Rz  = { x: t_rect.width-this.P.ZoneResize, y: t_rect.height-this.P.ZoneResize };  // zone pour curseur en mode resize
 
    this._viewBox[vBxEnum.width]  = Math.round(t_rect.width  * this._scale);
    this._viewBox[vBxEnum.height] = Math.round(t_rect.height * this._scale);
 
    this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
  }
  _evt_mouseDown(e) {
    if ( this._cursor.includes(e.target.style.cursor)) {
      if      (is_Moving_Off(this._mouseAction))  { this._mouseAction = mouseAct.Moving_ON  }
      else if (is_Sizing_Off(this._mouseAction))  { this._mouseAction = mouseAct.Sizing_ON  }
      //else                                        { this._mouseAction = mouseAct.Moving_Off }
 
      if (Cursor_ON(this._mouseAction)) {
        let t_rect = this.$_SVG.getBoundingClientRect();
        this._M_Mouse = { x : e.clientX + window.scrollX - t_rect.left,  y : e.clientY + window.scrollY - t_rect.top }; 
        this._R_Mouse = { x : t_rect.width  - this._M_Mouse.x,  y : t_rect.height - this._M_Mouse.y }; 
        this.$_SVG.style.cursor = this._cursor[this._mouseAction];
      }
    }
  }
  _evt_mouseUp(e) {
    this._mouseAction       = mouseAct.Moving_Off;
    this.$_SVG.style.cursor = this._cursor[this._mouseAction];
  }
  _evt_mouseOut(e) {
    let
      t_rect   = this.$_SVG.getBoundingClientRect(),
      OnMoving = Cursor_ON(this._mouseAction);
    if (OnMoving)
    {
      let MsPos = { x : e.clientX -Math.trunc(t_rect.left) , y : e.clientY -Math.trunc(t_rect.top) };
      OnMoving = !(MsPos.x<0 || MsPos.x> t_rect.width || MsPos.y<0 || MsPos.y> t_rect.height );
      if (!OnMoving)
      {
        this._mouseAction = mouseAct.Moving_Off
        this.$_SVG.style.cursor = this._cursor[this._mouseAction];
      }
    }
  }
  _evt_mouseMove(e) {
    let
      t_rect         = this.$_SVG.getBoundingClientRect(),
      mousePos       = { x : e.clientX + window.scrollX - t_rect.left, y : e.clientY + window.scrollY - t_rect.top },
      mDelta         = { x: mousePos.x-this._M_Mouse.x, y: mousePos.y-this._M_Mouse.y },
      MouseInRzZone  = (mousePos.x>this._Zone_Rz.x && mousePos.y>this._Zone_Rz.y)
    ;
    this._M_Mouse = mousePos;
 
    if (Cursor_Off(this._mouseAction))
    {
      this._mouseAction       = MouseInRzZone ? mouseAct.Sizing_Off : mouseAct.Moving_Off;
      this.$_SVG.style.cursor = this._cursor[this._mouseAction];
    }
    else if (is_Moving_ON(this._mouseAction))
    {
      this._viewBox[vBxEnum.left] -= Math.round(mDelta.x * this._scale );
      this._viewBox[vBxEnum.top]  -= Math.round(mDelta.y * this._scale );
 
      this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
    }
    else if (is_Sizing_ON(this._mouseAction))
    {
      let 
        w = mousePos.x + this._R_Mouse.x,
        h = mousePos.y + this._R_Mouse.y
      ;
      this.$_SVG.style.width  = this.svg_wh.w = w + 'px';
      this.$_SVG.style.height = this.svg_wh.h = h + 'px';
 
      this._viewBox[vBxEnum.width]  = Math.round(w * this._scale );
      this._viewBox[vBxEnum.height] = Math.round(h * this._scale );
 
      this._Zone_Rz.x = w-this.P.ZoneResize;
      this._Zone_Rz.y = h-this.P.ZoneResize;
 
      this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
    }
  }
  _evt_mouseWheel(e) {   // zoom par la molette de la souris
 
    e.preventDefault(); 
    e.stopImmediatePropagation();
 
    let
      t_rect           = this.$_SVG.getBoundingClientRect(),
      Delta_IHM        = { x: 0, y: 0 },
      Spot             = { x: 0, y: 0 },
      ScalePercentNext = Math.round(100/this._scale) + Math.sign(e.deltaY)
      ;
 
    Delta_IHM.x =  e.clientX + window.scrollX - t_rect.left;
    Delta_IHM.y =  e.clientY + window.scrollY - t_rect.top;
 
    Spot.x =  Math.round(Delta_IHM.x * this._scale) + this._viewBox[vBxEnum.left];
    Spot.y =  Math.round(Delta_IHM.y * this._scale) + this._viewBox[vBxEnum.top];
 
    this._Spot_InOut(Spot.x,Spot.y);
 
    if (this.P.Scale_Min < ScalePercentNext && ScalePercentNext < this.P.Scale_Max ) 
    {
      this._scale = (100 / ScalePercentNext).toFixed(4);
 
      this._viewBox[vBxEnum.left]   = Spot.x - Math.round(Delta_IHM.x * this._scale);
      this._viewBox[vBxEnum.top]    = Spot.y - Math.round(Delta_IHM.y * this._scale);
 
      this._viewBox[vBxEnum.width]  = Math.round(t_rect.width  * this._scale);
      this._viewBox[vBxEnum.height] = Math.round(t_rect.height * this._scale);
 
      this.$_SVG.setAttribute("viewBox", this._viewBox.join(' '));
 
      try { this.ZoomChanging(); }
      catch(err) { /* ignore it ! */ }
    }
    return false;
  }
  get Scale () {
    return  Math.round(100/this._scale);  // echelle exprimmée en %
  }
  set Scale(zScaleCiblePercent) {
 
    if (typeof zScaleCiblePercent !='number' ) {  // isNaN(zScaleCiblePercent) 
      throw `Scale Parameter is not a type number  -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
 
    zScaleCiblePercent = Math.trunc(zScaleCiblePercent); // jamais trop prudent.
 
    if (zScaleCiblePercent < this.P.Scale_Min) {
      throw `Scale Parameter is < ${this.P.Scale_Min} -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
    if (zScaleCiblePercent > this.P.Scale_Max) {
      throw `Scale Parameter is > ${this.P.Scale_Max} -- (svg_kit.Scale set) --<[${zScaleCiblePercent}]>--`;
    }
 
    let ScalePercent = Math.round(100/this._scale);
 
    if ( zScaleCiblePercent != ScalePercent) {
      let
        SensZoom  = ( zScaleCiblePercent > ScalePercent) ? +1 : -1,
        t_rect    = this.$_SVG.getBoundingClientRect(),
        Delta_IHM = { x: t_rect.width/2, y: t_rect.height/2 },
        Spot      = { x: 0, y: 0 },        
        anim_ID   = null,
        that      = this
      ;
 
      Spot.x =  Math.round(Delta_IHM.x * this._scale) + this._viewBox[vBxEnum.left];
      Spot.y =  Math.round(Delta_IHM.y * this._scale) + this._viewBox[vBxEnum.top];
 
      this._Spot_InOut(Spot.x,Spot.y);
 
      AnimStep();
 
      function AnimStep()
      {
        ScalePercent += SensZoom;
        that._scale = (100 / ScalePercent).toFixed(4);
 
        that._viewBox[vBxEnum.left]   = Spot.x - Math.round(Delta_IHM.x * that._scale);
        that._viewBox[vBxEnum.top]    = Spot.y - Math.round(Delta_IHM.y * that._scale);
 
        that._viewBox[vBxEnum.width]  = Math.round(t_rect.width  * that._scale);
        that._viewBox[vBxEnum.height] = Math.round(t_rect.height * that._scale);
 
        that.$_SVG.setAttribute("viewBox", that._viewBox.join(' '));
 
        // à désactiver si on pref ne pas renvoyer les redim intermédiaires
        try { that.ZoomChanging(); }
        catch(err) { /* ignore it ! */ }
 
        if ( ScalePercent === zScaleCiblePercent) {
 
          // à activer si on pref ne pas renvoyer les redim intermédiaires
          //try { that.ZoomChanging(); }
          //catch(err) { /* ignore it ! */ }
 
          cancelAnimationFrame(anim_ID);
        } else {
          anim_ID = requestAnimationFrame(AnimStep);
        }
      } /// AnimStep
    }
  } 
}

la partie HTML

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test-kit-SVG</title>
  <meta name="Author" content="LaReineDAngleterre">
 
  <style>
    html { height: 100%; }
    body {
      margin: 20px 0 0 20px;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
      height: calc(100% - 20px);
    }
    svg {
      border: 1px solid red;
      /*
      width: 810px;
      height: 820px;
      */
      width: 50%;
      height: 60%;
 
      background-color: rgb(60, 107, 119);
    }
    svg g path {
      fill: rgb(25, 25, 44);
      stroke: #cc4646;
      stroke-width: 0.5;
      transition: fill 0.1s;
    }
    svg g:hover path {
      fill: rgb(39, 39, 85);
    }
    svg g a text {
      fill: #e8e809;
      font-size: 6px;
      font-style: italic;
    }
    svg g:hover a text {
      fill: #fdfefe;
      font-weight: bold;
    }
    #commune_descriptif {
      transform: scaleY(0);
      transform-origin: 50% 0;
      transition:transform .4s ease;
 
      position:absolute;
      top: 0;
      left: 0;
      padding: 1em;
      border: 1px solid green;
      font-size: 1em;
      color: #000;
      background-color: rgba(255,255,255,.8);
      pointer-events: none;
    }
    .commune_descriptif_affiche {
      transform: scaleY(1) !important;
    }
  </style>
</head>
<body>
  <main>
 
  <button id='bt_trace'>trace</button>
  <input id='In_Zoom' type="text" value="200" />
  <button id='bt_Zoom'>Zoom (apply)</button> 
 
		<h1>« Zoom » élément SVG</h1>
 
    <svg id="cadreSVG" viewBox="130 128 400 410">
 
    <g data-description="Alleriot<br> 0,00 Km² <br>0 habitants">
      <a id="region-02" xlink:href="alleriot_cantons.html" data-img="img2" data-txt=" Alleriot">
        <path id="02" title="Alleriot" d="M289.1,256.3 277.7,261.2 265.6,259.3 254.2,256.7 242,244.4 242.7,238.2 213.5,215.9 208.3,204.6 228.3,188.1 241.1,166.1 252.1,181 251.5,204.9 270,207.7 283,219z" />
        <text transform="matrix(1 0 0 1 247.0518 232.501)">
          <tspan x="5" y="0" class="texte">Alleriot</tspan>
        </text>
      </a>
    </g>
    <g data-description="Baudrieres<br> 0,00 Km² <br>0 habitants">
      <a id="region-03" xlink:href="baudrieres_cantons.html" data-img="img3" data-txt=" Baudrieres">
        <path id="03" title="Baudrieres" d="M296,521.5 276.7,488.4 271.6,484.4 258.8,486.3 268.5,436.3 293.3,430.2 311.6,412.4 322.8,418.4 345.1,406 353.5,415.2 347.4,480.7 335.4,484.1 333.4,490 341.6,506.3 330.2,521z" />
        <text transform="matrix(1 0 0 1 286.791 466.0547)">
          <tspan x="5" y="0" class="texte">Baudrieres</tspan>
        </text>
      </a>
    </g>
    <g data-description="Chatenoy En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-04" xlink:href="chatenoy_en_bresse_cantons.html" data-img="img4" data-txt=" Chatenoy En Bresse">
        <path id="04" title="Chatenoy En Bresse" d="M242,244.4 237.1,247.8 202.2,239.8 174.1,242 158.4,233.3 157.4,222.6 170.8,213.3 190.9,224.1 208.3,204.6 213.5,215.9 242.7,238.2z" />
        <text transform="matrix(1 0 0 1 159.208 235.29)">
          <tspan x="15" y="-3" class="texte">Chatenoy En Bresse</tspan>
        </text>
      </a>
    </g>
    <g data-description="Guerfand<br> 0,00 Km² <br>0 habitants">
      <a id="region-05" xlink:href="guerfand_cantons.html" data-img="img5" data-txt=" Guerfand">
        <path id="05" title="Guerfand" d="M363.1,272 332,273.8 320.8,259.5 327.5,230 333.3,232.4 348.7,222.7 354.8,224.4 366.4,253.5z" />
        <text transform="matrix(1 0 0 1 326.5293 252.022)">
          <tspan x="5" y="0" class="texte">Guerfand</tspan>
        </text>
      </a>
    </g>
    <g data-description="Lans<br> 0,00 Km² <br>0 habitants">
      <a id="region-06" xlink:href="lans_cantons.html" data-img="img6" data-txt=" Lans">
        <path id="06" title="Lans" d="M212.5,311.6 200.9,290.7 186.8,279 199.8,260.5 211.8,258.3 229.8,265.6 244.1,278.4 263.1,282.6 251.7,299.3 234,299.5z" />
        <text transform="matrix(1 0 0 1 220.5591 291.0635)">
          <tspan x="0" y="-5" class="texte">Lans</tspan>
        </text>
      </a>
    </g>
    <g data-description="Lessard En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-07" xlink:href="lessard_en_bresse_cantons.html" data-img="img7" data-txt=" Lessard En Bresse">
        <path id="07" title="Lessard En Bresse" d="M444.3,360.8 429.5,349.1 417,346.7 405.4,331.8 355.9,333.5 360.8,324.2 373,324.4 387.9,314.1 405.7,310.7 410.9,299.6 444.9,314.3 440.6,344.8 446.9,360.7z" />
        <text transform="matrix(1 0 0 1 376.0293 329.4087)">
          <tspan x="10" y="-4" class="texte">Lessard En Bresse</tspan>
        </text>
      </a>
    </g>
 
    <g data-description="L'Abergement Sainte Colombe<br> 0 Km² <br>0 habitants">
      <a id="region-01" xlink:href="l_abergement_sainte_colombe_cantons.html" data-img="img1" data-txt=" L'Abergement Sainte Colombe">
        <path id="01" title="L'Abergement Sainte Colombe" d="M352.8,343.5 325.5,327.9 318.6,341 287.8,325.7 291.2,318.8 297.2,322.2 306.3,294.9 302.4,276.6 307.3,265.2 320.8,259.5 332,273.8 363.1,272 376.4,296.5 405,287.2 410.9,299.6 405.7,310.7 387.9,314.1 373,324.4 360.8,324.2 355.9,333.5z" />
        <text transform="matrix(1 0 0 1 307.7061 302.2188)">
          <tspan x="10" y="6" class="texte">L'Abergement Sainte Colombe</tspan>
        </text>
      </a>
    </g>
 
    <g data-description="Montcoy<br> 0,00 Km² <br>0 habitants">
      <a id="region-08" xlink:href="montcoy_cantons.html" data-img="img8" data-txt=" Montcoy">
        <path id="08" title="Montcoy" d="M307.3,265.2 300.7,255.8 289.1,256.3 283,219 293.4,194.9 293.2,175.6 321.5,203.1 327.5,230 320.8,259.5z" />
        <text transform="matrix(1 0 0 1 290.2764 232.501)">
          <tspan x="5" y="0" class="texte">Montcoy</tspan>
        </text>
      </a>
    </g>
    <g data-description="Oslon<br> 0,00 Km² <br>0 habitants">
      <a id="region-09" xlink:href="oslon_cantons.html" data-img="img9" data-txt=" Oslon">
        <path id="09" title="Oslon" d="M263.1,282.6 244.1,278.4 229.8,265.6 211.8,258.3 199.8,260.5 202.2,239.8 237.1,247.8 242,244.4 254.2,256.7 265.6,259.3z" />
        <text transform="matrix(1 0 0 1 237.9883 268.0566)">
          <tspan x="0" y="-3" class="texte">Oslon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Ouroux Sur Saone<br> 0,00 Km² <br>0 habitants">
      <a id="region-10" xlink:href="ouroux_sur_saone_cantons.html" data-img="img10" data-txt=" Ouroux Sur Saone">
        <path id="10" title="Ouroux Sur Saone" d="M234.9,412.4 223.7,384.1 214.2,376.5 192.3,360.4 213.2,349 212.5,311.6 234,299.5 251.7,299.3 254,311.1 248,321.1 271.4,340.6 288.9,339.7 295.3,349.9 293.1,361.5 280.2,375.3 275.5,393.5 258.4,411.8z" />
        <text transform="matrix(1 0 0 1 216.376 362.1758)">
          <tspan x="10" y="0" class="texte">Ouroux Sur Saone</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-11" xlink:href="saint_christophe_en_bresse_cantons.html" data-img="img11" data-txt=" Saint Christophe En Bresse">
        <path id="11" title="Saint Christophe En Bresse" d="M337.9,375.1 314.2,377.6 304.2,362.8 293.1,361.5 295.3,349.9 288.9,339.7 271.4,340.6 248,321.1 254,311.1 251.7,299.3 263.1,282.6 265.6,259.3 277.7,261.2 289.1,256.3 300.7,255.8 307.3,265.2 302.4,276.6 306.3,294.9 297.2,322.2 291.2,318.8 287.8,325.7 318.6,341 325.5,327.9 352.8,343.5 360.5,352.1 339.7,363.2z" />
        <text transform="matrix(1 0 0 1 297.9453 357.9932)">
          <tspan x="-37" y="-60" class="texte">Saint-Christophe</tspan>
          <tspan x="-30" y="-53" class="texte">en-Bresse</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Germain Du Plain<br> 0,00 Km² <br>0 habitants">
      <a id="region-12" xlink:href="saint_germain_du_plain_cantons.html" data-img="img12" data-txt=" Saint Germain Du Plain">
        <path id="12" title="Saint Germain Du Plain" d="M250,487.4 236.4,424.8 234.9,412.4 258.4,411.8 275.5,393.5 280.2,375.3 293.1,361.5 304.2,362.8 314.2,377.6 337.9,375.1 351.1,386.3 342.7,400.5 345.1,406 322.8,418.4 311.6,412.4 293.3,430.2 268.5,436.3 258.8,486.3z" />
        <text transform="matrix(1 0 0 1 277.7275 399.127)">
          <tspan x="0" y="5" class="texte">Saint Germain Du Plain</tspan>
        </text>
      </a>
    </g>
    <g data-description="Tronchy<br> 0,00 Km² <br>0 habitants">
      <a id="region-14" xlink:href="tronchy_cantons.html" data-img="img14" data-txt=" Tronchy">
        <path id="14" title="Tronchy" d="M428.4,376.8 410,378.3 405,366.7 384.6,351.6 360.5,352.1 352.8,343.5 355.9,333.5 405.4,331.8 417,346.7 429.5,349.1 444.3,360.8z" />
        <text transform="matrix(1 0 0 1 371.8467 344.7461)">
          <tspan x="10" y="0" class="texte">Tronchy</tspan>
        </text>
      </a>
    </g>
    <g data-description="Villegaudin<br> 0,00 Km² <br>0 habitants">
      <a id="region-15" xlink:href="villegaudin_cantons.html" data-img="img15" data-txt=" Villegaudin">
        <path id="15" title="Villegaudin" d="M482,223.1 448.3,241.6 429.2,245 410.4,240.7 415.9,229.6 411.4,207 437.7,174 444,183.9 438.7,201.3 469.3,220.8 472.7,215.7z" />
        <text transform="matrix(1 0 0 1 421.3457 226.2266)">
          <tspan x="5" y="0" class="texte">Villegaudin</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Martin En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-13" xlink:href="saint_martin_en_bresse_cantons.html" data-img="img13" data-txt=" Saint Martin En Bresse">
        <path id="13" title="Saint Martin En Bresse" d="M405,287.2 376.4,296.5 363.1,272 366.4,253.5 354.8,224.4 348.7,222.7 333.3,232.4 327.5,230 321.5,203.1 331.6,182.9 347.5,178.6 377,159 379.8,147.4 399,139.3 416.8,146.3 428.4,142.4 437.7,174 411.4,207 415.9,229.6 410.4,240.7 401.1,256.5 414.2,277 410.6,287.6z" />
        <text transform="matrix(1 0 0 1 332.8042 196.9453)">
          <tspan x="10" y="10" class="texte">Saint Martin En Bresse</tspan>
        </text>
      </a>
    </g>
 
 
  </svg>
 
  </main>
  <div id="commune_descriptif"></div>
 
  <div id="PosControl">x</div>
 
  <script src="kit_svg.js" ></script>
  <script>
 
    var
      MonSVG   = new Kit_SVG('cadreSVG',{ZoneResize : 30, Scale_Max  : 500}),
      elm_SVG  = document.getElementById('cadreSVG'),
      DivDesc  = document.getElementById('commune_descriptif')
      ;
 
    elm_SVG.addEventListener('mousemove', function(e) { 
      let g_Desc = null;
 
      if ( e.target.tagName==='path' ) {
        g_Desc = e.target.parentElement.parentElement; // 2 parents
      }
      if ( e.target.tagName==='tspan' ) {
        g_Desc = e.target.parentElement.parentElement.parentElement; // 3 parents
      }
 
      if (g_Desc) {
        let N_desc =  g_Desc.dataset.description;
 
        if (N_desc != DivDesc.innerHTML)
        { 
          DivDesc.innerHTML = N_desc;
        }
 
        DivDesc.style.left = e.clientX + window.scrollX + 'px';
        DivDesc.style.top  = e.clientY + window.scrollY + 'px';
        DivDesc.classList.add('commune_descriptif_affiche');
      }
      else
      {
        DivDesc.innerHTML = '';
        DivDesc.classList.remove('commune_descriptif_affiche');
      }
    });
 
    bt_trace.onclick = function(){
      let
        vBox = cadreSVG.getAttribute("viewBox").split(' ').map(v=>+v),
        cL = (vBox[2] / 2) + vBox[0],
        cH = (vBox[3] /2) + vBox[1]
        ;
 
      In_Zoom.value = MonSVG.Scale;
 
      tyRex         = elm_SVG.getBoundingClientRect(),
 
      console.log (` tyRex  w / h = ${tyRex.width } / ${tyRex.height}` );
      console.log ( ...vBox,  `, c= ${cL} / ${cH}` );
    }
    bt_Zoom.onclick = function() {
      MonSVG.Scale = parseInt(In_Zoom.value);
    }
 
    MonSVG.ZoomChanging = function() {
      In_Zoom.value = MonSVG.Scale;
    }
  </script>
</body>
</html>

**psychadelic** · 18/01/2019, 15h55

juste pour info, ça y est, j'ai corrigé mes bug sur l'objet kit_svg.js
le redimensionnement se fait sans décalage, le zoom a la molette ou par maj directe se fait de sans anicroche, j'ai même réussi à régler le conflit de la molette avec le scroll de la page.
J'ai maintenant quelques idées d'amélioration...

**apdf1** · 18/01/2019, 17h46

Salut psychadelic

Super, mais dit moi à quoi sert le bouton trace!!!!!!

Max

**psychadelic** · 18/01/2019, 19h31

le bouton trace me sert juste pour vérifier les valeurs de la viewBox du SVG, ainsi que certaines de son getBoundingClientRect
qu'il revoit dans la console du navigateur. (touche F12)

Sinon, je viens juste de changer le code du post 34= https://www.developpez.net/forums/d1.../#post10706640
plutôt que de laisser traîner du code erroné

**melka one** · 18/01/2019, 20h42

jour

je me suit déjà bien pris la tête sur ce genre de truc et j'ai adapter un script de mon cru qui fonctionnais pour une image le principe restant le même ce qui donne le code ci dessous

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test-kit-SVG</title>
  <meta name="Author" content="LaReineDAngleterre">
 
  <style>
    html { height: 100%; }
    body {
      margin: 20px 0 0 20px;
      padding: 0;
      font: 1em/1.5 Verdana,sans-serif;
      height: calc(100% - 20px);
    }
 
 
        #dvg {
      border: 1px solid red;
      /*cadre rouge autour de la carte*/
      width: 810px;
      height: 820px;
          position:relative;
          overflow: hidden;
          margin:auto;
    background-color: rgb(60, 107, 119);
    } 
 
 
    svg {
      
      height: 820px;
 
    }
        
         svg a{
      
      cursor:pointer
 
    }
 
    svg g path {
      fill: rgb(25, 25, 44);
      stroke: #cc4646;
      stroke-width: 0.5;
      transition: fill 0.1s;
    }
 
    svg g:hover path {
      fill: rgb(39, 39, 85);
    }
 
    svg g a text {
      fill: #e8e809;
      font-size: 6px;
      font-style: italic;
    }
 
    svg g:hover a text {
      fill: #fdfefe;
      font-weight: bold;
    }
 
    #commune_descriptif {
      transform: scaleY(0);
      transform-origin: 50% 0;
      transition:transform .4s ease;
 
      position:absolute;
      top: 0;
      left: ;
      padding: 1em;
      border: 1px solid green;
      font-size: 1em;
      color: #000;
      background-color: rgba(255,255,255,.8);
      pointer-events: none;
      
    }
    .commune_descriptif_affiche {
      transform: scaleY(1) !important;
    }
 
  </style>
 
 
  <script>
 
 
 
addEventListener('load',function(){
 
                new zoom_svg('cadreSVG')
 
                },false);
 
 
function zoom_svg(elem){
 
this.elem=document.getElementById(elem);
this.elem.style.marginLeft=window.getComputedStyle(this.elem, null).marginLeft;
this.elem.style.marginTop=window.getComputedStyle(this.elem, null).marginTop;
this.elem.onmousedown=this.prep_drag.bind(this);
this.elem.onmouseup=this.fin_drag.bind(this);
this.elem.addEventListener('wheel', this.dirizoom.bind(this), false);
this.rar=true;
this.setX=0;
this.setY=0;
this.deplacer=0;
 
var that=this;
this.drag=function(e){that.posi.call(that,e)}
 
var all=this.elem.getElementsByTagName('a');
 
for(var i=0;i<all.length;i++)
        {
            var lien=all[i].getAttribute('href')
                        
                        all[i].removeAttribute('href')
                        all[i].addEventListener("mouseup", function(lien){
 
                                if(this.elem.style.marginLeft==this.deplacer){
                                        document.location.href=lien
                                }
                        
                        }.bind(this,lien)
                        , false)
        } 
 
}
 
zoom_svg.prototype={
 
        //fonction pour le zoom directionnel
 
        dirizoom:function(e){
 
                var dde=document.documentElement.scrollTop ? document.documentElement : document.body;
                e.preventDefault();
                var val = e.deltaY > 0 ? -0.15 : 0.15;
                var elem=this.elem;
                var bound=elem.getBoundingClientRect();
                var bound_parent=elem.parentNode.getBoundingClientRect();
                var setX=e.pageX;
                var setY = e.pageY;
                var gauche=parseInt(this.elem.style.marginLeft)
                var haut=parseInt(this.elem.style.marginTop)
                var dirle=bound.width-setX+gauche+bound_parent.left+dde.scrollLeft;
                var dirto=bound.height-setY+haut+bound_parent.top+dde.scrollTop;
                var lf=bound.width;
                var rf=bound.height;
                elem.style.width=lf+(lf*val)+'px';
                elem.style.height=rf+(rf*val)+'px';
                var bound=elem.getBoundingClientRect();
                elem.style.marginLeft=gauche-((bound.width-lf))+(dirle*val)+'px';
                elem.style.marginTop=haut-((bound.height-rf))+(dirto*val)+'px';
        },
 
        //partie drag
 
        prep_drag:function(evt){
 
                if(this.rar){
                        
                        evt.preventDefault();
                        this.setX=evt.clientX;
                        this.setY=evt.clientY;
                        document.documentElement.addEventListener("mousemove", this.drag, false)
                        this.rar=false;
 
                        this.deplacer=this.elem.style.marginLeft;
                }
        },
 
        fin_drag:function(e){
 
                if(!this.rar){
                        document.documentElement.removeEventListener("mousemove", this.drag, false)
                        this.rar=true;
                }
        },
 
        posi:function(e){
 
                e.preventDefault();
                var bound=this.elem.getBoundingClientRect();
                this.elem.style.marginLeft=parseInt(this.elem.style.marginLeft)-(this.setX-e.clientX)+"px";
                this.elem.style.marginTop=parseInt(this.elem.style.marginTop)-(this.setY-e.clientY)+"px";
                this.setX=e.clientX;
                this.setY=e.clientY;
        }
}
  </script>
 
   <script>
   
   addEventListener('load',function(){
          
          document.getElementById('cadreSVG').addEventListener('mousemove', OverSVG_element );
          })
          
 
    function OverSVG_element(e) { 
        
      var g_Desc=e.target.parentNode.parentNode;
          var DivDesc  = document.getElementById('commune_descriptif')
 
      if (g_Desc.dataset.description || g_Desc.parentNode.dataset.description) {
        let N_desc =  g_Desc.dataset.description || g_Desc.parentNode.dataset.description;
 
        if (N_desc != DivDesc.innerHTML)
        { 
          DivDesc.innerHTML = N_desc;
        }
 
        DivDesc.style.left = e.clientX + window.scrollX + 'px';
        DivDesc.style.top  = e.clientY + window.scrollY + 'px';
        DivDesc.classList.add('commune_descriptif_affiche');
      }
      else
      {
        DivDesc.innerHTML = '';
        DivDesc.classList.remove('commune_descriptif_affiche');
      }
    }
 
  </script>
 
</head>
<body>
 
  <main>
 
    <button id='bt_trace'>trace</button>
 
		<h1>« Zoom » élément SVG</h1>
 
 
	<div id='dvg'>
 
	<svg id="cadreSVG" viewBox="130 128 400 410">
 
    <g data-description="Alleriot<br> 0,00 Km² <br>0 habitants">
      <a id="region-02" href="alleriot_cantons.html" data-img="img2" data-txt=" Alleriot">
        <path id="02" title="Alleriot" d="M289.1,256.3 277.7,261.2 265.6,259.3 254.2,256.7 242,244.4 242.7,238.2 213.5,215.9 208.3,204.6 228.3,188.1 241.1,166.1 252.1,181 251.5,204.9 270,207.7 283,219z" />
        <text transform="matrix(1 0 0 1 247.0518 232.501)">
          <tspan x="5" y="0" class="texte">Alleriot</tspan>
        </text>
      </a>
    </g>
    <g data-description="Baudrieres<br> 0,00 Km² <br>0 habitants">
      <a id="region-03" href="baudrieres_cantons.html" data-img="img3" data-txt=" Baudrieres">
        <path id="03" title="Baudrieres" d="M296,521.5 276.7,488.4 271.6,484.4 258.8,486.3 268.5,436.3 293.3,430.2 311.6,412.4 322.8,418.4 345.1,406 353.5,415.2 347.4,480.7 335.4,484.1 333.4,490 341.6,506.3 330.2,521z" />
        <text transform="matrix(1 0 0 1 286.791 466.0547)">
          <tspan x="5" y="0" class="texte">Baudrieres</tspan>
        </text>
      </a>
    </g>
    <g data-description="Chatenoy En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-04" href="chatenoy_en_bresse_cantons.html" data-img="img4" data-txt=" Chatenoy En Bresse">
        <path id="04" title="Chatenoy En Bresse" d="M242,244.4 237.1,247.8 202.2,239.8 174.1,242 158.4,233.3 157.4,222.6 170.8,213.3 190.9,224.1 208.3,204.6 213.5,215.9 242.7,238.2z" />
        <text transform="matrix(1 0 0 1 159.208 235.29)">
          <tspan x="15" y="-3" class="texte">Chatenoy En Bresse</tspan>
        </text>
      </a>
    </g>
    <g data-description="Guerfand<br> 0,00 Km² <br>0 habitants">
      <a id="region-05" href="guerfand_cantons.html" data-img="img5" data-txt=" Guerfand">
        <path id="05" title="Guerfand" d="M363.1,272 332,273.8 320.8,259.5 327.5,230 333.3,232.4 348.7,222.7 354.8,224.4 366.4,253.5z" />
        <text transform="matrix(1 0 0 1 326.5293 252.022)">
          <tspan x="5" y="0" class="texte">Guerfand</tspan>
        </text>
      </a>
    </g>
    <g data-description="Lans<br> 0,00 Km² <br>0 habitants">
      <a id="region-06" href="lans_cantons.html" data-img="img6" data-txt=" Lans">
        <path id="06" title="Lans" d="M212.5,311.6 200.9,290.7 186.8,279 199.8,260.5 211.8,258.3 229.8,265.6 244.1,278.4 263.1,282.6 251.7,299.3 234,299.5z" />
        <text transform="matrix(1 0 0 1 220.5591 291.0635)">
          <tspan x="0" y="-5" class="texte">Lans</tspan>
        </text>
      </a>
    </g>
    <g data-description="Lessard En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-07" href="lessard_en_bresse_cantons.html" data-img="img7" data-txt=" Lessard En Bresse">
        <path id="07" title="Lessard En Bresse" d="M444.3,360.8 429.5,349.1 417,346.7 405.4,331.8 355.9,333.5 360.8,324.2 373,324.4 387.9,314.1 405.7,310.7 410.9,299.6 444.9,314.3 440.6,344.8 446.9,360.7z" />
        <text transform="matrix(1 0 0 1 376.0293 329.4087)">
          <tspan x="10" y="-4" class="texte">Lessard En Bresse</tspan>
        </text>
      </a>
    </g>
 
    <g data-description="L'Abergement Sainte Colombe<br> 0 Km² <br>0 habitants">
      <a id="region-01" href="l_abergement_sainte_colombe_cantons.html" data-img="img1" data-txt=" L'Abergement Sainte Colombe">
        <path id="01" title="L'Abergement Sainte Colombe" d="M352.8,343.5 325.5,327.9 318.6,341 287.8,325.7 291.2,318.8 297.2,322.2 306.3,294.9 302.4,276.6 307.3,265.2 320.8,259.5 332,273.8 363.1,272 376.4,296.5 405,287.2 410.9,299.6 405.7,310.7 387.9,314.1 373,324.4 360.8,324.2 355.9,333.5z" />
        <text transform="matrix(1 0 0 1 307.7061 302.2188)">
          <tspan x="10" y="6" class="texte">L'Abergement Sainte Colombe</tspan>
        </text>
      </a>
    </g>
 
    <g data-description="Montcoy<br> 0,00 Km² <br>0 habitants">
      <a id="region-08" href="montcoy_cantons.html" data-img="img8" data-txt=" Montcoy">
        <path id="08" title="Montcoy" d="M307.3,265.2 300.7,255.8 289.1,256.3 283,219 293.4,194.9 293.2,175.6 321.5,203.1 327.5,230 320.8,259.5z" />
        <text transform="matrix(1 0 0 1 290.2764 232.501)">
          <tspan x="5" y="0" class="texte">Montcoy</tspan>
        </text>
      </a>
    </g>
    <g data-description="Oslon<br> 0,00 Km² <br>0 habitants">
      <a id="region-09" href="oslon_cantons.html" data-img="img9" data-txt=" Oslon">
        <path id="09" title="Oslon" d="M263.1,282.6 244.1,278.4 229.8,265.6 211.8,258.3 199.8,260.5 202.2,239.8 237.1,247.8 242,244.4 254.2,256.7 265.6,259.3z" />
        <text transform="matrix(1 0 0 1 237.9883 268.0566)">
          <tspan x="0" y="-3" class="texte">Oslon</tspan>
        </text>
      </a>
    </g>
    <g data-description="Ouroux Sur Saone<br> 0,00 Km² <br>0 habitants">
      <a id="region-10" href="ouroux_sur_saone_cantons.html" data-img="img10" data-txt=" Ouroux Sur Saone">
        <path id="10" title="Ouroux Sur Saone" d="M234.9,412.4 223.7,384.1 214.2,376.5 192.3,360.4 213.2,349 212.5,311.6 234,299.5 251.7,299.3 254,311.1 248,321.1 271.4,340.6 288.9,339.7 295.3,349.9 293.1,361.5 280.2,375.3 275.5,393.5 258.4,411.8z" />
        <text transform="matrix(1 0 0 1 216.376 362.1758)">
          <tspan x="10" y="0" class="texte">Ouroux Sur Saone</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Christophe En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-11" href="saint_christophe_en_bresse_cantons.html" data-img="img11" data-txt=" Saint Christophe En Bresse">
        <path id="11" title="Saint Christophe En Bresse" d="M337.9,375.1 314.2,377.6 304.2,362.8 293.1,361.5 295.3,349.9 288.9,339.7 271.4,340.6 248,321.1 254,311.1 251.7,299.3 263.1,282.6 265.6,259.3 277.7,261.2 289.1,256.3 300.7,255.8 307.3,265.2 302.4,276.6 306.3,294.9 297.2,322.2 291.2,318.8 287.8,325.7 318.6,341 325.5,327.9 352.8,343.5 360.5,352.1 339.7,363.2z" />
        <text transform="matrix(1 0 0 1 297.9453 357.9932)">
          <tspan x="-37" y="-60" class="texte">Saint-Christophe</tspan>
          <tspan x="-30" y="-53" class="texte">en-Bresse</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Germain Du Plain<br> 0,00 Km² <br>0 habitants">
      <a id="region-12" href="saint_germain_du_plain_cantons.html" data-img="img12" data-txt=" Saint Germain Du Plain">
        <path id="12" title="Saint Germain Du Plain" d="M250,487.4 236.4,424.8 234.9,412.4 258.4,411.8 275.5,393.5 280.2,375.3 293.1,361.5 304.2,362.8 314.2,377.6 337.9,375.1 351.1,386.3 342.7,400.5 345.1,406 322.8,418.4 311.6,412.4 293.3,430.2 268.5,436.3 258.8,486.3z" />
        <text transform="matrix(1 0 0 1 277.7275 399.127)">
          <tspan x="0" y="5" class="texte">Saint Germain Du Plain</tspan>
        </text>
      </a>
    </g>
    <g data-description="Tronchy<br> 0,00 Km² <br>0 habitants">
      <a id="region-14" href="tronchy_cantons.html" data-img="img14" data-txt=" Tronchy">
        <path id="14" title="Tronchy" d="M428.4,376.8 410,378.3 405,366.7 384.6,351.6 360.5,352.1 352.8,343.5 355.9,333.5 405.4,331.8 417,346.7 429.5,349.1 444.3,360.8z" />
        <text transform="matrix(1 0 0 1 371.8467 344.7461)">
          <tspan x="10" y="0" class="texte">Tronchy</tspan>
        </text>
      </a>
    </g>
    <g data-description="Villegaudin<br> 0,00 Km² <br>0 habitants">
      <a id="region-15" href="villegaudin_cantons.html" data-img="img15" data-txt=" Villegaudin">
        <path id="15" title="Villegaudin" d="M482,223.1 448.3,241.6 429.2,245 410.4,240.7 415.9,229.6 411.4,207 437.7,174 444,183.9 438.7,201.3 469.3,220.8 472.7,215.7z" />
        <text transform="matrix(1 0 0 1 421.3457 226.2266)">
          <tspan x="5" y="0" class="texte">Villegaudin</tspan>
        </text>
      </a>
    </g>
    <g data-description="Saint Martin En Bresse<br> 0,00 Km² <br>0 habitants">
      <a id="region-13" href="saint_martin_en_bresse_cantons.html" data-img="img13" data-txt=" Saint Martin En Bresse">
        <path id="13" title="Saint Martin En Bresse" d="M405,287.2 376.4,296.5 363.1,272 366.4,253.5 354.8,224.4 348.7,222.7 333.3,232.4 327.5,230 321.5,203.1 331.6,182.9 347.5,178.6 377,159 379.8,147.4 399,139.3 416.8,146.3 428.4,142.4 437.7,174 411.4,207 415.9,229.6 410.4,240.7 401.1,256.5 414.2,277 410.6,287.6z" />
        <text transform="matrix(1 0 0 1 332.8042 196.9453)">
          <tspan x="10" y="10" class="texte">Saint Martin En Bresse</tspan>
        </text>
      </a>
    </g>
 
    <!-- -->
    </svg>
 </div>
  </main>
  <div id="commune_descriptif"></div>
 
</body>
</html>

ce fut interessant.

**psychadelic** · 18/01/2019, 23h20

@melka one
c'est pas mal, mais ça fait bizare d'utiliser une terminologie "drag/drop" pour déplacer la carte alors que c'est juste un tracking sur le mousemove.
ceci dit, c'est peut-être une idée à exploiter (avec un vrai drag/drop), je vais peut-être faire une nouvelle version utilisant cette méthode, ça me permettrait sans doute de corriger l'apparence de la souris lors du déplacement, et sans doute moins de conflits avec les interactions propre au code JS lié au contenu de la carte SVG.

pour que cela ressemble un peu plus à mon kit-svg, il corriger ton css ainsi:

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    #dvg {
      border: 1px solid red;
      /*cadre rouge autour de la carte*/
      width: 810px;
      height: 820px;
      position: relative;
      overflow: hidden;
      margin: 20px 0 0 20px;
      background-color: rgb(60, 107, 119);
      resize: both;
    }
 
    svg {
      width: 810px;
      height: 820px;
    }

Mais pour ça reste une solution CSS pour "image binaire" et non vectorielle.
Par exemple mon système permet d'exprimer le width /hight en pourcentages et de le faire évoluer dynamiquement, tout en conservant la valeur de zoom sur la carte

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
    #dvg {
/*...*/
      width: 50%;
      height: 60%;
/*...*/
    }
    svg {
      width: 100%;
      height: 100%;
    }

**melka one** · 19/01/2019, 22h24

terminologie "drag/drop"

décalage aurait peut être été mieux vu qu'il s'agit d'un décalage par rapport a la nouvelle et l'ancienne position de la souris.

Zoomer un SVG

JavaScript

Discussions similaires

Partager

Partager