La propriété mask-type définit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence (aussi appelé masque alpha). Cette propriété s'applique sur l'élément SVG <mask>. Le comportement de cette propriété peut être surchargée par la propriété mask-mode qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.

/* Valeurs avec un mot-clé */
mask-type: luminance;
mask-type: alpha;

/* Valeurs globales */
mask-type: inherit;
mask-type: initial;
mask-type: unset;

Valeur initialeluminance
Applicabilitéles éléments <mask>
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Syntaxe

La propriété mask-type est définie avec un mot-clé parmi ceux définis ci-après.

Valeurs

luminance
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont les valeurs de luminance relatives qui seront utilisées lorsque le masque sera appliqué.
alpha
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du canal alpha de l'image qui seront utilisées lorsque le masque sera appliqué.

Syntaxe formelle

luminance | alpha

Exemples

Prenons comme masque le rectangle suivant :

<rect x="10" y="10" width="80" height="80"
    fill="red" fill-opacity="0.7" />
Le voici :

Appliquons le à cette boîte :

Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de mask-type appliquée à l'élément <mask>, on aura deux carrés différents :

mask-type: alpha; mask-type: luminance;

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-type' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 24Edge ? Firefox Support complet 35
Support complet 35
Aucun support 20 — 52
Désactivée
Désactivée From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 35
Support complet 35
Aucun support 20 — 52
Désactivée
Désactivée From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Applies to HTML elementsChrome Aucun support NonEdge ? Firefox Support complet 20IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 20Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,