Snap SVG : approfondissements

Dans la page précédente nous avons découvert la bibliothèque et quelques méthodes de base.
Maintenant je vais aller plus loin pour vous montrer toutes les possibilités de ce framework en présentant d'autres méthodes.

Récupération de la librairie à partir d'un CDN (Content Delivrery Network)

Comme tout framework et pour avoir la dernière version mais à condition d'avoir une connection internet, il est préférable de charger le fichier à partir d'un site proposant les versions les plus récentes des outils web.

Extrait de la partie HEAD de cette page :
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js" > < /script >

Méthodes after() & before()

Le rendu

Notez que la ligne noire est au dessus de l'ellipse et que l'ensemble est penché.

Le code correspondant

Un instruction HTML crée une zone SVG adaptative dans la page ; le script se contente de la remplir. <svg viewBox ="0 0 800 400" width ="80%" id ="zone"> </svg> <script> var s = Snap("#zone") ; // utiliser une zone SVG existante var rx = 100; var ry = 150; // dimensions futures de l'ellipse var ligne = s.line(100,200,300,200).attr({stroke: 'black', strokeWidth : 30}) ; // dessiner ligne var ellipse = s.ellipse(200, 200, rx, ry).attr({fill: 'blue'}).after(ligne); // dessiner ellipse sous ligne var groupe = s.group(ellipse,ligne); // grouper les deux formes en un objet groupe.attr({transform : 't400r45'}); // translater et incliner l'objet

Je vous rappelle que si vous exprimez la largeur du canevas en pourcentage il faut impérativement utiliser l'attribut viewBox qui sert de répère cartésien pour positionner et dessiner les formes.
Les paramètres d'une forme peuvent être des variables ; c'est ce que je fais pour dessiner l'ellipse.
Comme en jQuery on peut chainer les méthodes. Ainsi en une seule instruction il est possible de définir et colorier une forme (remplissage et contour).

L'instruction qui dessine l'ellipse est exécutée après celle qui dessine la ligne ; donc l'ellipse devrait être normalement au dessus de la ligne or c'est l'inverse ...
En effet j'ai utilisé la méthode after(élément). Il existe aussi la méthode before(élément).

On peut grouper plusieurs formes en un seul objet avec la méthode group(élément1,élément2, ...).
Ici, je groupe les deux formes en un groupe intitulé "groupe" et j'applique à cet objet une transformation avec : translation & rotation.

Utiliser dans le script des boucles

Un script Snap c'est d'abord un script JS donc nous pouvons utiliser les structures de contrôle : tests et boucles.

Le rendu

Le code correspondant

...
<svg viewBox ="0 0 800 400"  width ="80%"  id ="zone1"> </svg>
<script>
	var s = Snap("#zone1") ;
	var pos_x = 50, pos_y = 50;
	var carre = s.rect(pos_x,pos_y,100,100).attr({stroke : "red", fill : "none", strokeWidht : 2}); 
	for(var vcompteur = 1; vcompteur < 15 ; vcompteur++)
	{
		pos_x = pos_x + 20; pos_y = pos_y + 20; 
		carre.clone().attr({x: pos_x, y:pos_y});
	}
	...

Grâce à une boucle un canevas SVG préexistant est rempli de 14 carrés !
Notez l'emploi de la méthode modèle.clone().

Méthodes polygon() & polyline

Dans cet exemple je présente les méthodes polygon(), polyline(). J'en profite aussi pour expliquer comment produire des contours sous forme de tirets.

Le script

	var s = Snap("#zone2");
	s.circle(100, 100, 80).attr({fill: "none",stroke: 'red',  strokeWidth: 30,    
		strokeDasharray: "15 10"});
	// une forme fermée
	s.polygon(100, 200, 380, 200, 380, 400).attr({fill : "none", stroke : "purple", 
		strokeWidth : 10, strokeLinejoin : "bevel"}); 
	// une forme ouverte
	s.polyline(50, 300, 350, 300, 350, 500).attr({fill : "none", stroke : "orange", 
		strokeWidth : 10, strokeLinecap : "round"});

Ceux qui ont utilisé les balises line, polygon, polyline en SVG ne sont pas surpris par le code.
Ces balises deviennent des méthodes dans le framework Snap SVG ; les attributs sont écrits selon la syntaxe JavaScript (mots collés, initiale de chaque mot en majuscule à partir du deuxième mot).
Donc l'apprentissage de Snap SVG est très rapide à condition d'avoir des notions de SVG.

Le contour du cercle est une suite de tirets rouges grâce à l'attribut strokeDasharray : "15 10".
La méthode polygon(x1,y1, x2,y2,..., xn,yn) permet de réaliser des formes fermées puisque une ligne est automatiquement ajoutée entre le premier et le dernier point.
Le style des angles est défini avec l'attribut strokeLinejoin : bevel / round / miter (par défaut)
La méthode polyline(x1,y1, x2,y2,..., xn,yn) permet de réaliser des formes ouvertes.
Le style des extrémités des lignes (et suites de lignes) est défini avec l'attribut strokeLinecap : round / square / butt (par défaut)

Le rendu

Insertion d'images matricielles et de textes

Dans ce quatrième exemple je vais vous montrer comment insérer (une simple liaison) une image existante dans une zone SVG.
Vous savez qu'en SVG traditionnel il faut utiliser la balise image et donc d'après vous qu'elle est la méthode dans Snap ???
J'insère aussi dans le canevas SVG du texte ...

Le code CSS & HTML

<style>
	.forme1{fill : red ; font-size : 30px ;text-anchor : middle ; }
...
<svg viewBox ="0 0 600 400"  width ="80%"  id ="zone3" 
		style = "background : url(fond1.jpg); background-size : cover;"> </svg>

Une classe "forme1" pour formater du texte SVG.
Je rappelle que la propriété text-anchor gère l'alignement horizontal du texte par rapport au paramètre x. Si valeur est "middle" le texte se positionne autour du point x.

La zone de dessin dispose en "background" une belle image dont les dimensions sont adaptées au canevas

Le script

	var s = Snap("#zone3");
	var requin = s.image("requin.gif",50,50,100,70); 
	var plongeur =s.image("plongeur.gif",500,200,90,50);
	var contenu ="Rencontre funeste";
	var texte = s.text(300,350, contenu); 
	texte.attr({class : "forme0"}); 
	
	function effacer() {this.remove(); }
		
	requin.click(effacer); 
	plongeur.click(effacer);

la méthode image(src,x,y,L,H) permet d'insérer (sous forme d'une liaison) une image matricielle dans un canevas SVG.
this.remove() efface l'élément courant. Donc la fonction intitulée "effacer" est générique : s'applique à l'élément courant.

Notez comme la programmation événementielle est simple en Snap SVG : élément.événement(fonction)

Le rendu

Cliquez sur le requin OU le plongeur pour effacer cet objet.
Actualisez la page pour afficher de nouveau les "sprites".

Remarque

Dans l'exemple ci-dessous la zone de dessin SVG est rendue responsive via une instruction SVG traditionnelle.

Notez bien la deuxième règle de style qui produit le fond de la boite identifié "zone3".

La première instruction du script crée une zone de dessin responsive (largeur exprimée en %).
Attributs viewBox & ID sont ensuite ajoutés à l'objet.
Le reste du script (insertion des "sprites", du texte, définition et appel de fonction) est inchangé.

La méthode transform()

Compte tenu de son importance le mot "transform" n'est pas seulement un attribut de la méthode attr() mais peut être également une méthode à part entière !

Le script

	var s = Snap("#zone4");
	//insertion d'une image SVG dans le canevas
	var avion = s.image("avion.svg", 0,0, 260,110 );
	// clonage de l'image vectorielle importée
	var avion2 = avion.clone(); 
	var avion3 =avion.clone();
	// transformations relatives aux clones
	avion2.transform('t100,300 r15');
	avion3.transform('t600,0 s .5 r-30'); 
	
	function effacer() {this.remove(); };
	avion.click(effacer); 
	avion2.click(effacer);
	avion3.click(effacer);

On peut insérer avec la méthode image() non seulement des images matricielles mais aussi des images vectorielles (fichier au format SVG).
Le fichier "avion.svg" a été produit avec Inkscape !
J'applique la méthode transform() aux clones de avion.svg
Comme dans le canevas précédent on peut effacer l'élément courant.

Les résultat

Cliquez sur un élément pour l'effacer. Actualisez la page pour réafficher toutes les formes.

Les clones ont subi des translations, des rotations et des changements d'échelle !

Les méthodes relatives aux classes

Sachez que les méthodes addClass(), removeClass(), toggleClass() présentes chez jQuery existent aussi dans Snap SVG.

Le CSS relatif au canevas

	.forme1 {fill: red; stroke-width : 5 ; stroke : green; }
	.forme2 {fill: yellow; stroke-width : 5 ; stroke : purple; }
	.forme3{fill : none ; font-size : 30px ; stroke : navy ; stroke-width : 1 ; text-anchor : middle ; }

Le script

	var s = Snap("#zone5");
	var carre5 =s.rect(10,10,100,100,50);
	// un carré qui ressemble à un rond !
	carre5.addClass("forme1"); 
	var cercle5 =s.circle(200,200,50);
	cercle5.addClass("forme2"); 
	
	// fonction qui supprime la classe 
	function effacer_forme() {carre5.removeClass("forme1"); cercle5.removeClass("forme2"); }
	
	var texte1 = s.text(200,350,"Effacer mise en forme"); 
	texte1.addClass("forme3");
	texte1.click(effacer_forme); 
	
	// fonction bascule : rajoute ou supprime la classe
	function bascule() { carre5.toggleClass("forme1"); cercle5.toggleClass("forme2"); }
	
	var texte2 = s.text(600,350,"bouton bascule"); 
	texte2.addClass("forme3");
	texte2.click(bascule);

J'en profite pour vous montrer comment dessiner un cercle avec la méthode rect(). Il suffit de dessiner un carré avec des angles arrondis : rayon d'arrondi = la moitié du côté.

Il est plus simple d'utiliser la méthode addClass() que la méthode attr() avec l'attribut "class".
La méthode removeClass(nomClasse) permet de retirer une classe à un élément.
La méthode toggleClass(nomClasse) ajoute la classe à l'élément si elle est absente ; retire la classe à l'élément si elle est présente.

Le rendu

Cliquez sur le texte "effacer mise en forme" pour que les formes soient noires.
Cliquez sur le texte "bascule" pour retirer/ajouter les couleurs aux formes.

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Snap SVG : approfondissements

Récupération de la librairie à partir d'un CDN (Content Delivrery Network)

Méthodes after() & before()

Le rendu

Le code correspondant

Utiliser dans le script des boucles

Le rendu

Le code correspondant

Méthodes polygon() & polyline

Le script

Le rendu

Insertion d'images matricielles et de textes

Le code CSS & HTML

Le script

Le rendu

Remarque

La méthode transform()

Le script

Les résultat

Les méthodes relatives aux classes

Le CSS relatif au canevas

Le script

Le rendu