SVG : masques et découpes

Nous allons aborder deux nouvelles balises du format SVG : mask et clipath.

L'outil masque

Une image bénéficiant d'un masque

On peut souhaiter appliquer au dessin le même effet que si il était vu au travers d'un rideau translucide. Il faut alors utiliser la fonction masque.

Le principe du masque est simple.
Si le masque est transparent (opacité de 0%) alors l'objet sous le masque sera transparent (donc invisible) !
Si le masque est opaque (opacité de 100%) alors l'objet sous le masque sera opaque (donc visible) !
Si le masque est opaque à 50% alors l'objet sous le masque aura une opacité de 50% !

Le haut de l'image est masqué. Le bas de l'image est identique à l'original.

Le code SVG correspondant

Ici on définit avec la balise mask un masque composite : 6 rectangles. Chaque rectangle a une largeur de 500 et une hauteur de 100 et est rempli de blanc avec une opacité croissante (augmentation de 20% à chaque fois).
Ce masque s'applique à une image de 500 par 600 grâce via l'attribut mask.

Image avec découpe

On peut souhaiter l'effet d'un objet vu à travers un trou de serrure ou une paire de jumelles. Il faut alors utiliser la fonction découpe. Utilisation d’une découpe grâce à la balise clipPath

Le code SVG correspondant

Grâce au conteneur clipPath on définit ici une découpe simple : une ellipse.
Puis on affiche une image avec cette découpe en utilisant l'attribut clip-path à la balise image

Découpe : autre exemple

Jolie fille vue au travers d'un trou de serrure

La découpe peut être un groupe de formes.
Ci-dessous la découpe est un cercle et un triangle pour créer un trou de serrure.

Ici il s'agit de l'incorporation dans la page d'un fichier SVG (decoupe.svg)

Le code pour l'insertion de l'image SVG dans la page :

Il faut incorporer l'image vectorielle avec la balise object car le code SVG dans ce fichier contient des liens vers d'autres images.

Le fichier "decoupe.svg"

Quant au code du fichier SVG, il est le suivant :
Retour menu