Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
mask
Baseline 2023Newly 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'attributmask 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'attributmask en CSS.
Exemple
html,body,svg { height: 100%;}<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask 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'attributmask 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 etmask-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é CSSmask |
|---|---|
| Valeur par défaut | none |
| Animable | Oui |
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |