Accueil
Mes tutoriels sur la programmation
Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site
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.
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 au conteneur SVG avec les attributs widht, height, viewBox & ID. Instruction qui ne présente aucune difficulté ; donc je ne vous communique que le script.
var paper = Snap("#zone1") ;
// le canevas SVG est référencé par la variable paper
var flou = paper.filter(Snap.filter.blur(10,10));
// définition d'un filtre : floutage
var rectangle = paper.rect(100, 100, 200,300).attr({fill : "red", filter: flou});
//application du flou à un rectangle
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())
var s = Snap("#zone2") ;
// la variable "s" référence le canevas SVG
// définition de 5 filtres chromatiques ci-dessous
var f45 = s.filter(Snap.filter.hueRotate(45)) ;
var f135 = s.filter(Snap.filter.hueRotate(135)) ;
var f225 = s.filter(Snap.filter.hueRotate(225)) ;
var f315 = s.filter(Snap.filter.hueRotate(315)) ;
var f360 = s.filter(Snap.filter.hueRotate(360)) ;
// application des filtres à une image
s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f45 });
s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f135 });
s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f225 });
s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f315 });
s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f360 });
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 !
var s = Snap("#zone3") ;
// définition de 5 filtres de luminosité
var f0 = s.filter(Snap.filter.brightness(0)) ;
var f1 = s.filter(Snap.filter.brightness(.5)) ;
var f2 = s.filter(Snap.filter.brightness(1)) ;
var f3 = s.filter(Snap.filter.brightness(2)) ;
var f4 = s.filter(Snap.filter.brightness(4)) ;
// application des filtres à une image
s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });
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.
var s = Snap("#zone4") ;
// définition de 5 filtres de contraste
var f0 = s.filter(Snap.filter.contrast(0));
var f1 = s.filter(Snap.filter.contrast(.5));
var f2 = s.filter(Snap.filter.contrast(1)) ;
var f3 = s.filter(Snap.filter.contrast(2)) ;
var f4 = s.filter(Snap.filter.contrast(3)) ;
// application des filtres à une image
s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });
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.
var s = Snap("#zone5") ;
// 2 filtres avec commande sepia, 2 avec commande invert et 2 avec comme grayscale (nuance de gris).
var f0 = s.filter(Snap.filter.sepia(0));
var f1 = s.filter(Snap.filter.sepia(1));
var f2 = s.filter(Snap.filter.invert(0)) ;
var f3 = s.filter(Snap.filter.invert(1)) ;
var f4 = s.filter(Snap.filter.grayscale(1)) ;
var f5 = s.filter(Snap.filter.grayscale(0.5)) ;
// application des filtres à une image
s.image("../images/jolie_fille.jpg",0,0,160,200).attr({filter: f0 });
s.image("../images/jolie_fille.jpg",160,0,160,200).attr({filter: f1});
s.image("../images/jolie_fille.jpg",320,0,160,200).attr({filter: f2});
s.image("../images/jolie_fille.jpg",480,0,160,200).attr({filter: f3 });
s.image("../images/jolie_fille.jpg",640,0,160,200).attr({filter: f4 });
s.image("../images/jolie_fille.jpg",800,0,160,200).attr({filter: f5 });
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.
Remarquez que le canevas SVG est ombré ainsi que le cercle. Par contre le carré ne l'est pas.
var s = Snap("#zone6") ;
var f = s.filter(Snap.filter.shadow(10, 10, .5));
// définition d'un filtre SVG : ombrage
var carre = s.rect(0,0,100,100).attr({fill : "olive", class : "ombrage"});
var cercle = s.circle(300, 200, 100).attr({fill : "navy", filter: f });
On applique la propriété box-shadow (via la classe "ombrage") à la balise SVG et à une forme SVG (le carré).
On applique le filtre SVG identifié "f" à une autre forme SVG (le cercle).
Or si la balise SVG est bien ombrée ce n'est pas le cas du carré et c'est logique :
la propriété box-shadow ne peut s'appliquer qu'à un élément HTML (comme la balise SVG) et jamais à un objet SVG.
Il aurait fallu appliquer le filtre "f" également au carré pour que ce dernier soit ombré.