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 abordant d'autres méthodes.
Notez que la ligne noire est au dessus de l'ellipse et que l'ensemble est penché.
Un instruction HTML crée une zone SVG adaptative dans la page ; le script se contente de la remplir.
Je vous rappelle que si vous exprimez la largeur du canevas en % il faut impérativement utiliser l'attribut viewBox !
l'attribut ID est indispensable pour identifier la zone SVG dans le script.
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 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.
Via Snap SVG on peut utiliser les boucles JavaScript !
Grâce à une boucle un canevas SVG préexistant est rempli de 14 carrés !
Notez l'emploi de la méthode élément.clone().
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.
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"});
Il s'agit d'un extrait du code ; les balises ouvrante et fermante SCRIPT ne sont pas mentionnées.
Ceux qui ont utilisé les balises line, polygon, polyline en SVG traditionnel 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 tradtionnel.
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)
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 ...
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
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)
Cliquez sur le requin OU le plongeur pour effacer cet objet.
Actualisez la page pour afficher de nouveau les "sprites".
Dans l'exemple ci-dessous la zone de dessin SVG est rendue responsive via une instruction SVG traditionnelle.
Nous aurions pu tout créer via CSS et un script Snap comme je vais vous montrer maintenant.
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 et ID sont ensuite ajoutés à l'objet.
Le reste du script (insertion des "sprites", du texte, fonction et appels) est inchangé.
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 !
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.
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 !
Sachez que les méthodes addClass(), removeClass(), toggleClass() présentes chez jQuery existent aussi dans Snap SVG.
.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 ; }
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.
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.