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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Grâce à la version 2 de SVG la création d'images vectorielles statiques ou animées sera beaucoup plus simple.
La compatibilité entre SVG et CSS sera considérablement accrue.
Les navigateurs commencent seulement à implémenter cette nouvelle version.
Les navigateurs récents autorisent désormais l'application de filtres CSS à des éléments SVG.
Or la définition des filtres en CSS est beaucoup plus simple qu'en SVG.
Il s'agit donc d'une remarquable avancée en matière de programmation web.
Je vous montre ci-dessous que les mêmes définitions de filtres (basées sur la syntaxe CSS) peuvent s'appliquer non seulement à des éléments HTML mais aussi à des éléments SVG de la page web.
Ci-dessous trois éléments HTML et trois objets SVG auxquels j'ai appliqué les mêmes filtres.
La première image (élement HTML) et le premier rectangle (objet SVG) sont floutés.
La deuxième image et le deuxième rectangle sont ombrés.
La troisième image et le troisième rectangle sont floutés et ombrés.
.flou1 {filter : blur(6px);}
.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }
Les classes correspondent à des filtres définis avec la syntaxe CSS.
Le troisième filtre est composite : flou et ombrage.
Un document SVG peut comporter une feuille de style avec la définition de filtres selon la syntaxe CSS.
Ces filtres peuvent s'appliquer aux objets SVG de ce document.
Notez la feuille de style interne dans ce document SVG.
Cette feuille de style comprend trois filtres.
Le canevas proprement dit dessine trois rectangles avec des coins arrondis.
Il est quand même utile de connaitre un peu la syntaxe des filtres SVG car les éditeurs WYSIWYG tels Inkscape et Boxy SVG
génèrent des filtres selon cette syntaxe.
Sachez par ailleurs qu'il y a réciprocité : un filtre défini en SVG peut s'appliquer aussi à un élément HTML.
Cette situation était fréquente par le passé puisque la norme CSS2 ignorait encore les filtres.
Si vous écrivez href au lieu de xlink:href le navigateur comprendra.
Je rappelle que l'on retrouve l'attribut href avec les éléments image & use du langage SVG.
Dans la version 1 seuls les paramètres géométriques ne peuvent être passés qu'en attributs.
Avec la version 2 tous les paramètres géométriques d'un objet (qui précisent la taille et la position) peuvent
aussi être passés en propriétés.
Si vous naviguez avec Firefox la zone de dessin ne fait apparaitre que le dégradé CSS ... mais pas l'ellipse.
Si, par contre vous visualisez cette page web avec Chrome ou Edge l'ellipse apparait.
Tous les paramètres (de style et géométriques) de l'ellipse sont passés en propriétés CSS (via l'attribut STYLE).
La possibilité de passer tous les paramètres en propriété permet de systématiser l'animation éventuelle via CSS3.
Sous Firefox le canevas est simplement rempli de jaune, pas de rond animé !
Notez que le cercle est identifié "rond".
@keyframes animer
{
0% {fill-opacity:0.1; r : 10;}
50% {fill-opacity :1 ; r: 200 ;}
100% {fill-opacity:0.1; r : 10; }
}
#rond {animation : animer 20s 0s infinite linear;}
Via le 'keyframes' j'anime l'opacité (paramètre de style) et le rayon (paramètre géométrique).
Tant que certains navigateurs populaires n'auront pas implémenté la possibilité de spécifier touts les attributs géométriques en propriété de style, il sera prematuré de mettre en ligne le code ci-dessus.
Ci-dessous un document SVG inséré dans cette page web via la balise Iframe :
Pour le chemin en rouge, les marqueurs (anneaux) sont rouges ; pour le chemin en vert ils sont verts et pour le chemin en bleu ils sont bleus ...
Ce code fonctionne avec tous les navigateurs récents.
Trois chemins mais une seule définition car emploi d'une règle de style : path{...}
Dans cette règle de style notez l'utilisation du raccourci marker qui remplace marker-start, marker-mid, marker-end.
La valeur de l'attribut "stroke" dans la balise circle est : stroke="context-stroke" : ainsi chaque marqueur adopte la couleur du stroke de la ligne correspondante.
L'attribut markerUnits="userSpaceOnUse" dans l'élément marker ; Idéal quand on veut un marqueur de taille fixe (ex. flèches, symboles) quel que soit le stroke-width du chemin qui le porte.
Pour un élément dépendant, l'attribut fill peut prendre la valeur "context-fill".
Remarque : aucune implémentation pour le moment.
La norme SVG 2 prévoit que la propriété, très pratique, z-index puisse s'appliquer à des éléments SVG.
Je rappelle que cette propriété CSS permet de gérer l'empilement d'éléments.
On pourrait donc avoir le code suivant :
Le rectangle bleu apparaitrait au premier plan alors que c'est le premier dessiné mais comme il a le z-index le plus élevé.
Un "keyframes" CSS pourrait ainsi modifier l'ordre d'empilement des objets.
Aucun navigateur n'a encore implémenté z-index pour les éléments SVG ...