Vous êtes ici : Accueil > Cours > SVG > Masque et découpage SVG
Masque et découpage en SVG c'est quoi ?
Tout comme avec CSS, l'écrêtage (ou découpage) et le masquage sont réalisables avec SVG grâce aux éléments clipPath et mask.
Le découpage consiste à cacher tout ou partie d'un élément graphique que ce soit avec une forme de base (élément SVG circle par exemple), un tracé (path) ou encore du texte (text). Autrement dit, tout ce qui se trouve à l'intérieur du tracé de détourage est visible, tandis que l'extérieur est caché.
Le masquage est, quant à lui, constitué d'une forme, d'un chemin, d'une image, d'un dégradé, ou encore d'un motif. Son rôle va être de couvrir tout ou partie d'un élément en contrôlant le degré de transparence de ce dernier.
Pour celles et ceux qui n'auraient pas perçu la différence entre découpage et masquage SVG, un dessin valant mieux qu'un long discours :
Le découpage avec l'élément clipPath
Il y a deux façons d'utiliser le découpage en SVG : avec du SVG directement dans le document HTML (SVG inline) ou avec un fichier SVG externe (SVG external).
Dans les deux cas, il faudra également une référence CSS via la propriété clip-path ou SVG avec la même propriété.
Une référence CSS se compose comme ceci :
/*cette classe est à mettre dans l'élément que l'on souhaite détourer */
.class {
clip-path: url("#svg-inline");/*cet identifiant doit être le même que dans l'élément SVG clipPath*/
}
Avant de voir les différentes méthodes pour appliquer un détourage en SVG, voyons les pricipaux attributs (en effet, ils sont nombreux🔗) de l'élément clipPath.
L'attribut clipPathUnits va se révéler très utile, puisqu'il va définir le système de coordonnées du détourage. Il peut prendre deux valeurs :
userSpaceOnUse (par défaut) : représente les valeurs du système de coordonnées utilisateur en place au moment où le détourage est référencé.
objectBoundingBox : représente les fractions ou les pourcentages de la zone de délimitation de l'élément auquel le détourage est appliqué.
💡 Un autre attribut important dans le détourage en SVG est clip-rule. Associé à l'élément clipPath, il définit l'algorithme à utiliser pour remplir les différentes parties d'un graphique. Il en va de même pour l'attribut fill-rule.
Comme vous pouvez le constater, c'est assez simple à mettre en place. On indique une image dans le code HTML, puis en dessous le code SVG qui va nous servir à découper cette image. Dans l'exemple, la forme choisie est un polygone. Nous avons mis un identifiant au sein de l'élément SVG clipPath, que nous avons ensuite reporté dans une classe en CSS en utilisant la propriété clip-path.
Autre exemple SVG inline avec des formes simples :
💡 Pour que le découpage fonctionne avec la méthode SVG externe, vous devez impérativement déclarer l'attribut xmlns dans la balise <svg>. En revanche, il ne semble pas y avoir de support pour le moteur Blink (Chrome, Safari...).
Exemples avancés :
Nous avons vu des exemples simples de découpage en SVG. Corsons un peu les choses en utilisant plusieurs formes dans un même découpage.
Il est également possible d'animer du SVG (et plus particulièrement l'élément clipPath puisque c'est le sujet de cet article) avec JavaScript. Il existe de nombreuses bibliothèques.
Dans l'exemple ci-dessous, nous utiliserons GSAP :
Le principe du masquage est assez similaire au découpage. On peut observer une réelle différence lorsqu'on utilise les dégradés. En effet, en créant un dégradé sur une forme, une image, un tracé ou du texte, nous allons utiliser l'opacité.
Il nous faut également parler des attributs de l'élément mask qui sont les suivants :
x
y
width
height
maskUnits
maskContentUnits
Les attributs maskUnits et maskContentUnits prennent tous deux les mêmes valeurs, à savoir :
userSpaceOnUse : représente les valeurs du système de coordonnées utilisateur en place au moment où le masque est référencé
objectBoundingBox : représente les fractions ou les pourcentages de la zone de délimitation de l'élément auquel le masque est appliqué.
Tandis que l'attribut maskUnits fait directement référence au masque, l'attribut maskContentUnits, quant à lui, fait référence au contenu enfant du masque.
💡 Les couleurs (RGB ; rouge, vert et bleu) et l'opacité (ou canal alpha) font donc partie intégrante du masquage en SVG. Ainsi, la couleur de la forme du masquage va t-elle définir l'opacité de la forme qui utilise le masque. Plus la couleur est proche du blanc, plus la forme du masque sera opaque (pas de transparence). Au contraire, plus celle-ci s'approche du noir, plus elle sera transparente.
Un exemple ci-dessous :
Un autre exemple sur une image (on applique un dégradé linéaire) :
