Développement web

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);
    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.

    Voir la documentation détaillée.
  • CariNavig : navigation dans un canvas SVG.

    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.
    resize
    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.

    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.

    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.

    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.

    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.

    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.
    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.

    My beautiful text
    Votre navigateur ne vous permet pas d'afficher correctement le contenu de ce site (voir les tables de compatibilité). Pour profiter pleinement des nouveautés du web, téléchargez dès maintenant la dernière version de Firefox, un navigateur libre, à but non lucratif et respectueux de votre vie privée.

    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.