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

Snap SVG : les filtres

Comme vous l'avez vu dans une page précédente, la définition de filtres en SVG est un peu lourde ... Avec Snap SVG c'est beaucoup plus simple, aussi simple qu'en CSS3.

Le créateur de Snap SVG s'est inspiré des filtres CSS mais en plus il propose "shadow" (ombrage). Ce qui est assez logique car la propriété CSS box-shadow ne peut pas s'appliquer à un élément SVG.

Dans tous les exemples qui suivent le code HTML se résume à la balise SVG. Instruction qui ne présente aucune difficulté. Donc je ne vous communique que le script (sans les balises début & fin SCRIPT).

Le floutage : commande blur

Exemple

Le script correspondant

Ici la zone de dessin SVG est référencée par la variable "paper". C'est l'usage dans la documentation officielle de Snap SVG.

Pour chaque type de filtre il y a une méthode. Pour un flou il s'agit de : Snap.filter.blur().
Il ne suffit pas de définir un filtre il faut aussi préciser qu'il s'applique au canevas : paper.filter(Snap.filter.blur())

Rotation sur le cercle chromatique : commande hueRotate

Exemple

Le script

On définit 5 filtres pour le canevas (référencé par la variable "s"). On utilise ici la méthode Snap.filter.hueRotate().

Le paramètre est une valeur comprise entre 0 degré et 360 degrés. Attention une rotation de 360° équivaut a une rotation de 0° c'est à dire l'original !

Luminosité : commande brigthness

Exemple

Le script

La valeur de référence est 1 ; si argument inférieur à 1 alors image assombrie (avec 0 : noir absolu) ; si argument est supérieur à 1 alors image éclaircie.

Contraste : commande contrast

Exemple

Le script

La valeur de référence est 1 ; si argument supérieur à 1 alors image plus contrastée ; si argument est égal à 0 alors affichage d'une zone grisée. Si le paramètre compris entre 1 et 0 alors perte de contraste.

Autres commandes : sepia, invert, grayscale

Exemple

Le script

Effet sépia : si paramètre vaut 1 alors sépia total ; si paramètre vaut 0 alors l'image filtrée correspond à celle d'origine.

Effet invert : l'argument ne peut prendre que deux valeurs : 1(négatif) ou 0 (image d'origine).

Effet grayscale (nuance de gris) : si le paramètre est 1 alors image en noir et blanc ; si paramètre vaut 0 alors aucun effet.

Ombrage d'une forme : shadow

Exemple

Le canevas SVG ainsi que les deux éléments SVG sont ombrés.

Code HTML

Le script

Le canevas SVG (élément HTML est ombré via la propriété box-shadow) tandis que les éléments SVG sont ombrés via un filtre défini par Snap SVG.
Trois paramètres pour la propriété shadow : dx, dy, opacity.