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.
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 ...
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.