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
Comme vous l'avez vu dans une page précédente, la définition de filtres en SVG natif donne un code relativement lourd ...
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 objet SVG.
Le canevas est identifié "zone1".
Le script :
var s = Snap("#zone1") ;
// le canevas SVG est référencé par la variable s
var flou = s.filter(Snap.filter.blur(10,10));
// application du flou à deux rectangles
var rectangle1 = s.rect(0,0,100,100).attr({fill : "red",filter: flou});
var rectangle2 = s.rect(200,200,100,100).attr({fill : "green",filter: flou});
Pour chaque type de filtre à définir, il y a une méthode. Pour un flou il s'agit de : Snap.filter.blur().
Pour appliquer un filtre à un objet il suffit d'utiliser la méthode attr() avec la commande filter : nomFiltre.
Ce deuxième canevas dans la page web est identifié "zone2".
Le script :
var s = Snap("#zone2") ;
// la variable "s" référence le canevas
// 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 !
Ce troisième canevas est identifié "zone3".
Le script :
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.
Ce quatrième canevas est identifié "zone4".
Le script :
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.
Ce cinquième canevas est identifié "zone5".
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.
Le canevas SVG ainsi que les deux éléments SVG sont ombrés.
... <svg viewBox ="0 0 600 400" width ="80%" id ="zone6" style ="box-shadow : 5px 5px 5px gray ;" > ...
Ce dernier canevas est identifié "zone6".
var s = Snap("#zone6") ;
var ombre = 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", filter : ombre});
var cercle = s.circle(300, 200, 100).attr({fill : "navy", filter: ombre });
Le canevas SVG (élément HTML) est ombré via la propriété CSS 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.