Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

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

Combiner SVG 2- Snap SVG & CSS 3

Google Chrome, le leader des navigateurs, commence à implémenter la version 2 de SVG. On peut supposer que les autres suivront ...
Parmi les innovations de SVG 2, les paramètres géométriques c'est à dire les paramètres de position et de taille des formes tels with, height, x, y, cx,cy, r, rx, ry,etc. pourront être passés sous forme de propriétés CSS. Je rappelle qu'en SVG 1 les paramètres géométriques ne peuvent être passés que sous forme d'attributs.
Donc quand SVG 2 sera implémenté par tous les navigateurs populaires, il n'y aura plus de "prise de tête" : tous les paramètres pourront être passés sous forme de propriétés CSS ou d'attributs.
Or cette innovation change tout quant à l'animation d'une forme ; on pourra se passer de JavaScript et du SMIL pour animer. En effet dans un modèle d'animation CSS ("keyframes") on pourra désormais manipuler les paramètres de dimension et de taille comme ceux de mise en forme.

Donc les exemples qui suivent (basés sur SVG version 2) ne fonctionnent que sous Google Chrome pour l'instant !

Dessins statiques et SVG 2

Exemple 1

Un canevas SVG contenant un rectangle aux coins arrondis.

Le code correspondant

J'ai passé en propriétés (via l'attribut "style" de la balise) tous les paramètres géométriques et de mise en forme.
J'aurais pu utiliser une classe CSS ayant pour sélecteur "rect" et en propriétés : x,y,width,height, rx,ry, fill, etc.

Exemple 2

Insertion d'une image dans un canevas SVG.

Le code correspondant:

Nouveauté SVG 2 : l'attribut "xlink:ref" peut être remplacé "href" tout simplement.

Animations avec SVG 2, Snap SVG & CSS 3

C'est surtout au niveau des animations SVG qu'on apprécie les nouveautés apportées par la version 2 de SVG.

Le SMIL de SVG (balise animate, animateMotion, animateTransform, etc.) peut être remplacé par du CSS dans les "keyframes" (modèles d'animation) on peut manipuler les paramètres géométiques comme ceux de style.

La syntaxe des filtres et dégradés est très lourde en SVG conventionnel alors qu'elle est fort simple via la librairie Snap SVG.

Exemple 1 : animation 3D réalisée en 5 minutes

Un carré ombré et violet se transforme en rond transparent puis le cycle reprend en sens inverse.

Le code correspondant

Le code est très simple : un zest de SVG conventionnel, un peu de CSS et un court script.

Le code SVG :

La zone de dessin est identifiée "canevas" et elle est ombrée.

La feuille de style :

Le modèle d'animation ne comporte que deux étapes donc on peut remplacer les pourcentages par les mots clés "from" et "to".
Pour transformer un carré en rond il suffit de créer des coins arrondis : paramètres rx & ry.
Nouveauté : les paramètres géométriques peuvent être manipulés dans le cadre d'un "keyframes". Plus besoin de devoir utiliser le SMIL ou JavaScript.
On applique ce "keyframes" à l'élément SVG identifié "carre" ; le rythme de la transformation ne sera pas constant mais "ease" (rapide au départ et lent à la fin).

Le script Snap SVG :

La variable "zone" référence la zone de dessin SVG identifiée "canevas" par HTML.
On crée ensuite un filtre de type "shadow" (ombre portée).
On dessin un carré et on lui applique une couleur de remplissage, un identifiant et le filtre.

Il ne faut pas, bien sûr, oublier de charger la librairie Snap SVG.
Pour revoir les filtres avec ce framework SVG : filtres avec Snap SVG

Une autre animation 3D

Des boules ombrées se déplacent sur le tapis d'un billard également ombré.

Au départ la boule est positionnée en haut à gauche et la boule blanche en bas à droite.
Chaque boule parcourt un chemin en forme de V (V inversé pour la boule blanche).

Le code

Je vous laisse l'imaginer.
Vous devez être capable de le reconstituer en lisant bien les consignes ci-dessous et en vous inspirant de vos connaissances acquises en CSS, SVG et Snap SVG.

Code HTML : balise SVG avec règle de style en ligne pour bordurer et ombrer le canevas SVG.

Code CSS : deux "keyframes" : un qui anime la boule rouge et l'autre qui déplace la boule blanche.
Dans ces modèles d'animation on modifie les valeurs des paramètres cx & cy.

Script : dans ce script je définit un filtre de type "shadow".
Puis je dessine deux cercles auxquels on applique le filtre, une couleur (rouge ou blanc) et un ID.

Je vous communique cependant quelques extraits de CSS, HTML et du script.

Dans le cadre du modèle d'animation, plus besoin de programmer une translation X,Y. On peut modifier les valeurs des paramètres géométriques des ronds : cx et cy. C'est beaucoup plus simple !