Comment zoomer sur une image avec la molette en SVG

Bonjour à tous,

Je vous explique mon problème: je dois créer une zone SVG dans laquelle se trouve une image (en SVG). Je dois inclure la fonction suivante: lorsque je fais rouler la molette vers l'avant avec la souris sur l'image je souhaite que mon image soit zoomer et dézoomer en faisant rouler la molette vers l'arrière.
Je ne sais pas quelle fonction utiliser...

En espérant avoir était clair dans mes explications =)

DOMMouseScroll pour Firefox, onmousewheel pour les autres navigateurs.

Merci de ta réponse aussi rapide =)

Tu aurais un exemple de code qui montre les attributs de la fonction DOMMouseScroll et comment l'utiliser dans un code HTML? S'il te plait

Merci d'avance

un exemple

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<style type="text/css">
 
div{
	background-color:#5db375;
	height:200px;
	width:200px;
	opacity:0.5
}
 
</style>
<script type="text/javascript">
 
var opa=50
 
function deplace(e){
 
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();	
 
var delta = 0;
 
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
 
var val=((delta<0) ? 10 : -10)
 
change(val)
}
 
 
function change(valeur){
 
var elem=document.getElementById('element')
 
opa+=valeur;
 
if(opa>=0 && opa<=100){
 
		if(document.all && !window.opera){ 
			elem.style.filter = 'alpha(opacity=' + opa + ')';
		} 
		else{
			elem.style.opacity = opa/100;
		}
		}
}
 
 
function init(){
 
var el=document.getElementById('element')
 
if(navigator.appName.substring(0,5)=="Micro"){
el.attachEvent('onmousewheel',deplace);
 
}
else{
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
el.addEventListener(elmouse,deplace, false);
 
}
}
 
onload=init
</script>
</head>
<body>
<br>
<div id='element'></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Merci mekal pour cet exemple j'ai réussit à l'adapter à mon code.