mask
Baseline
2023
Newly available
Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |
Compatibilité des navigateurs
Chargement…