simple zoom en svg et javascript

date de creation : June 02 2008 00:06:16.

Utilisation du ZOOM

Introduction

en cour d'écriture
La plupard des SVGViewer proposent des fonctions de "Zoom in" et "Zoom out" , mais il peu être intéressant de gérer de façon indépendante cette fonctionnabilité, lors d'applications et(ou) d'animations, etc ...

Le principe est de modifier la taille d'un élément lors d'un évènement associé.
Rien de bien compliqué ; il nous uffira de différencier si l'on veut augmenter ou bien diminuer cette taille.

Il est intéressant de définir également un "zomm maximum" et un "zoom minimum" .

Mise en place du code

Récupérer les informations nécessaires

Il ne faut comme d'habitude spécifier :

• Le document SVG
• L'élément racine SVG

	

<svg version="1.0"
	 baseProfile="full"
	 xmlns="http://www.w3.org/2000/svg"
	 xmlns:xlink="http://www.w3.org/1999/xlink"
	 id="SVG" height="" width="" onload="Init(evt)">
<script type="text/ecmascript">
<![CDATA[
	// varaibles globales : accessible depuis 
	//toutes les fonctions
	// declaration
	var SVGDoc;
	var SVGRoot;
	
	// function init
	//@param object event
	function Init(evt){
		SVGDoc = evt.target.ownerDocument;
		SVGRoot = SVGDoc.documentElement;
		
		// test 
		alert(SVGDoc + " " + SVGRoot);
	}
	
]]>
</script>
<!-- un rectangle -->
<rect x="10" y="10" 
      height="100" width="100" 
      fill="rgb(250,125,50)" fill-opacity="0.5"/>	 	
</svg>
	
	Voir le svg >>>

Le DOM propose la propriété currentScale faisant partie de l'interface SVGSVGElement (pour faire simple : le noeud svg).
Si l'on affiche la valeur de SVGRoot.currentScale :

	alert(SVGRoot.currentScale);	

... on obtient 1.
A noter que cette valeur de retour est un 'float'.

La fonction 'augmenter la taille'

Notre valeur de départ est donc 1.
Si je clique sur mon émément 'rectangle' je désire augmenter sa taille d'autant (ou n'importe quelle autre valeur souhaitée) tant que elle est inférieur à 10 (ou tout autre valeur de condition).

	

	// declaration
	var SVGDoc;
	var SVGRoot;
	var mon_rectangle;
	
	
	// function init
	//@param object event
	function Init(evt){
		SVGDoc = evt.target.ownerDocument;
		SVGRoot = SVGDoc.documentElement;
		
		mon_rectangle = SVGDoc.getElementById('rz');
		mon_rectangle.addEventListener('click',AugmenterTaille,false);
	}
	
	function AugmenterTaille(evt){
		var cs = SVGRoot.currentScale;
		if(cs < 10)
		// on augmente la taille
		cs = cs * 1.1;
		SVGRoot.currentScale = cs;
		
	}
	
	voir le svg >>>

Ajoutons un controleur 'graphique'

Avec un petit peu de code supplémentaire, on peut facilement ajouter un 'plus' et 'moins' plutôt que de cliquer directement sur l'objet rectangle ...

	

	//dans le script JS
	_plus = SVGDoc.getElementById('p');
	_moins = SVGDoc.getElementById('m');
		
	_plus.addEventListener('click',AugmenterTaille,false);
	_moins.addEventListener('click',DiminuerTaille,false);
		
	// dans le code svg
	<rect id="p" x="10" y="10" 
	height="20" width ="20"
	fill="rgb(200,200,200)"/>
	  
	<rect id="m" x="50" y="10" 
	height="20" width ="20"
	fill="rgb(200,200,200)"/>

	<g stroke="black" stroke-width="1.0">
	<line x1="20" y1="10" x2="20" y2="30"/>
	<line x1="10" y1="20" x2="30" y2="20"/>
	<line x1="50" y1="20" x2="70" y2="20"/>
	</g>
	
	voir svg>>>

1. Il faut absolument afficher tous les codes des tutos de la même manière ...
Cela fait pas sérieux !

2. Encore vérifier les fautes d'orthographes et de frappes (amperstand)