Couches de Masque SVG CSS
Couches de Masque SVG CSS
L'élément SVG <mask> peut être utilisé pour appliquer un masque à une image.
Ici, nous utilisons l'élément SVG <mask> pour créer différentes couches de masque pour une image.
Couche de Masque SVG - Cercle
L'élément SVG <circle> est utilisé pour créer un cercle.
Exemple
Une couche de masque SVG (formée comme un cercle) :
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle r="150" cx="200" cy="200" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Couche de Masque SVG - Ellipse
L'élément SVG <ellipse> est utilisé pour créer une ellipse.
Exemple
Une couche de masque SVG (formée comme une ellipse) :
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Couche de Masque SVG - Triangle
L'élément SVG <polygon> est utilisé pour créer une forme graphique qui contient au moins trois côtés.
Exemple
Une couche de masque SVG (formée comme un triangle) :
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Masque SVG - Étoile
L'élément SVG <polygon> peut également être utilisé pour créer une couche de masque en forme d'étoile.
Exemple
Une couche de masque SVG (formée comme une étoile) :
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Masque SVG - Cercles Multiples
Ici, nous définissons trois cercles avec différentes positions en x et en y.
Exemple
Une couche de masque SVG (formée comme des cercles) :
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Toutes les Propriétés de Masquage CSS
Le tableau suivant répertorie toutes les propriétés de masquage CSS :
| Propriété | Description |
|---|---|
| mask-clip | Spécifie quelle zone est affectée par une image de masque |
| mask-composite | Spécifie une opération de composition utilisée sur la couche de masque actuelle avec les couches de masque en dessous |
| mask-image | Spécifie une image à utiliser comme couche de masque pour un élément |
| mask-mode | Spécifie si l'image de la couche de masque est traitée comme un masque de luminance ou comme un masque alpha |
| mask-origin | Spécifie la position d'origine (la zone de position du masque) d'une image de couche de masque |
| mask-position | Définit la position de départ d'une image de couche de masque (par rapport à la zone de position du masque) |
| mask-repeat | Spécifie comment l'image de la couche de masque est répétée |
| mask-size | Spécifie la taille d'une image de couche de masque |
| mask-type | Spécifie si un élément SVG <mask> est traité comme un masque de luminance ou comme un masque alpha |