Ybochatay : CariSVG

CariSVG est une bibliothèque qui rend le SVG hautement intéractif. Elle est légère (45Ko), composée d'un ensemble de modules autonomes (pour la plupart), écrite en mode strict et sans pollution de l'espace de noms global.

Elle agit généralement sur les prototypes des objets DOM natifs et apporte donc de nouvelles fonctionnalités aux objets DOM sans remettre en cause votre façon de coder (avec ou sans framework). Les modules s'intègrent facilement et sans conflit avec vos scripts.

CariSVG est compatible avec les dernières versions de Firefox, Chrome, Safari et Internet Explorer (9). Si ce site est écrit en HTML5 avec du SVG "en ligne", CariSVG fonctionne tout aussi bien dans les pages XHTML.

CariCore : partie commune (minimaliste) de tous les modules.
Elle permet de condenser et clarifier l'écriture de ceux-ci par une collection de petites fonctions basiques.
Libre à vous de les utiliser ou non, mais il faut inclure ce fichier pour le bon fonctionnement des modules suivants.
```
var svg = document.querySelector("#CariCore svg"),
elmt = svg.addElmt("text",{x:10,y:10,"font-size":"12px"});
elmt.text.add("Hello World");
elmt.transf.rotate(15).scale(1.5);
```
Voir la documentation détaillée.
CariNavig : navigation dans un canvas SVG.

raz

Vous pouvez utiliser les boutons de contrôle pour naviguer dans le canvas SVG, ou la molette de la souris pour zoomer et vous déplacer par cliquer/glisser dans le canvas (façon Google Maps).
Vous pouvez redimensionner le canvas par le coin en bas à droite.
```
var svg = document.querySelector("#CariNavig svg");

//instanciation de la propriete navig
svg.cariNavig({ zoom:true, mobility:true, resize:{field:"#resize"} });

//boutons de controle
document.querySelector("#zoomplus").onclick = function() {
  svg.navig.zoom.change({ coef:1.1, animate:true });
};

document.querySelector("#naviggauche").onclick = function() {
  svg.navig.mobility.translate({ x:50,y:0, animate:true });
};

//etc
```
CariCurve : Manipulation de courbes de Bézier.

Tracez des chemins par clics successifs, terminez par un double-clic.
Vous pouvez ensuite modifier le tracé à l'aide des points de contrôle.
```
var svg = document.querySelector("#CariCurve svg");
			
svg.onclick = function(e) {
	if (e.target!==this) { return false; }
	var curve = this.addElmt("CariCurve");
	curve.textPath.add("CariSVG is an amazing tool made with web standards.");
	curve.draw(e);
}
```
C'est le module le plus complet, il offre de nombreuses possibilités (animation, décoration, etc).
Voir la documentation détaillée.
CariDrag : Drag&drop d'éléments SVG pour le déplacement, le redimensionnement et la rotation.

Déplacez l'élément par un cliquer/glisser gauche, redimensionnez le avec le bouton droit, et faites le pivoter avec clic gauche + shift.
```
document.querySelector("#butterfly").cariDrag({
	mobility:true, resize:true, rotation:true
});
```
Voir la documentation détaillée.
CariAnim : Animation d'éléments SVG.
Lancer l'animation
```
document.querySelector("#launch").onclick = function() {
	var molecule = document.querySelector("#molecule");
	molecule.cariAnim({
		to : {scale:2,rotate:180},
		style : "swing",
		duration : 600
	})
	.cariAnim({scale:1,rotate:0});
	return false;
};
```
Voir la documentation détaillée.
CariTextAnim : Animation pour l'affichage de texte lettre par lettre.

Lancer l'animation
```
document.querySelector("#launchText").onclick = function() {
	var text = document.querySelector("#CariTextAnim text");
	text.cariTextAnim({from:{scale:10}});
	return false;
};
```
C'est le seul module purement fantaisiste.
Remarque : ce module est dépendant du module CariAnim.
Voir la documentation détaillée.


	raz

CariCore : partie commune (minimaliste) de tous les modules.

CariNavig : navigation dans un canvas SVG.

CariCurve : Manipulation de courbes de Bézier.

CariDrag : Drag&drop d'éléments SVG pour le déplacement, le redimensionnement et la rotation.

CariAnim : Animation d'éléments SVG.

CariTextAnim : Animation pour l'affichage de texte lettre par lettre.