Dans cet article
La balise <mask> est utilisée en SVG pour définir une région masquée où certaines parties d'un élément enfant seront visibles et d'autres non.
Elle permet de créer des effets visuels avancés, comme des transparences, des découpages ou des ombrages.
Structure et syntaxe de la balise <mask>
Structure
Voici un exemple de base :
HTML
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="myMask">
<rect x="0" y="0" width="200" height="200" fill="white" />
<circle cx="100" cy="100" r="50" fill="black" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="orange" mask="url(#myMask)" />
</svg>Dans cet exemple :
- La balise
<mask>définit un masque appelémyMask; - On crée ensuite un rectangle orange avec
<rect>qui est masqué avec ce même masque, laissant visible une zone circulaire au centre ; - Les zones blanches du masque sont visibles, et les zones noires deviennent transparentes.
Voici notre résultat :
Exemple avancé
Voici un exemple plus complexe utilisant des dégradés et du texte :
HTML
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="textMask">
<rect x="0" y="0" width="300" height="200" fill="white" />
<text x="50" y="100" font-size="60" fill="black" font-family="Arial">MASK</text>
</mask>
</defs>
<rect x="0" y="0" width="300" height="200" fill="url(#gradient)" mask="url(#textMask)" />
<defs>
<linearGradient id="gradient" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
</svg>Dans cet exemple :
- Un masque texte (
<text>) est appliqué à un rectangle dégradé ; - Seules les zones correspondant au texte sont visibles.
Essayez par vous-même :
Attributs de la balise <mask>
La balise <mask> prend en charge plusieurs attributs :
| Attribut | Description |
|---|---|
id | Identifiant unique du masque, utilisé pour le référencer dans d’autres éléments via mask="url(#id)". |
maskUnits | Définit le système de coordonnées du masque (userSpaceOnUse ou objectBoundingBox). |
maskContentUnits | Spécifie le système de coordonnées pour le contenu du masque (userSpaceOnUse ou objectBoundingBox). |
x, y | Position horizontale et verticale du masque. |
width, height | Dimensions du masque. |
Compatibilité des navigateurs
La balise <mask> est compatible avec la majorité des navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (avec certaines limitations) |