Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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 >
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 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).
Ces deux méthodes sont pratiques car elles permettent de modifier l'ordre d'empilement des objets sans modifier l'ordre initial des instructions du script.
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.
Un script Snap c'est d'abord un script JS donc nous pouvons utiliser les structures de contrôle : tests et boucles.