Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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.

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

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

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

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

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

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

Le script

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.