mask
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis décembre 2023.
L'attribut mask est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément <mask>) sur l'élément qui possède cet attribut.
Note :
On peut aussi utiliser l'attribut mask en CSS.
Exemple
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<mask id="monMask" maskContentUnits="objectBoundingBox">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<polygon
fill="black"
points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
</mask>
<!-- Fait un trou de la forme d'une étoile sur le cercle rouge,
ce qui laisse apparaître le cercle jaune situé dessous. -->
<circle cx="50" cy="50" r="20" fill="yellow" />
<circle cx="50" cy="50" r="45" fill="red" mask="url(#monMask)" />
</svg>
Depuis SVG2, l'attribut mask est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size et mask-composite.
Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text> et <use>.
Contexte d'utilisation
| Valeur | Voir la propriété CSS mask |
|---|---|
| Valeur par défaut | none |
| Animable | Oui |
Spécifications
| Spécification |
|---|
| CSS Masking Module Level 1 # the-mask |