mask-origin

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété mask-origin permet de définir l'origine à partir de laquelle placer le masque.

Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via mask-image. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes inline ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles box-decoration-break agira pour déterminer la zone de positionnement du masque.

Valeur initiale	`border-box`
Applicabilité	tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Valeurs multiples */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Valeurs non-standards */
 -webkit-mask-origin: content;
 -webkit-mask-origin: padding;
 -webkit-mask-origin: border;

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

Valeurs

content-box: La position de la zone est relative à la boîte de contenu.
padding-box: La position de la zone est relative à la boîte de remplissage (padding). Pour les boîtes simples, 0 0 désigne le coin en haut à gauche de la bordure de cette boîte et 100% 100% le coin en bas à droite.
border-box: La position de la zone est relative à la boîte de bordure.
margin-box: La position de la zone est relative à la boîte de marge.
fill-box: La position de la zone est relative à la boîte liée à l'objet (bounding box).
stroke-box: La position de la zone est relative à la boîte de contour de l'objet (stroke bounding box).
view-box: La zone d'affichage (viewport) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par viewBox. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de viewBox.
content: Synonyme de content-box.
padding: Synonyme de padding-box.
border: Synonyme de border-box.

Syntaxe formelle

<geometry-box>#où 
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
où 
<shape-box> = <box> | margin-box
où 
<box> = border-box | padding-box | content-box

Exemples

CSS

#masked {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); 
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */ 
  mask-origin: border-box; /* À modifier dans le résultat. */
}

HTML

<div id="masked">
</div>
<select id="origin">
  <option value="content-box">content-box</option>
  <option value="padding-box">padding-box</option>
  <option value="border-box" selected>border-box</option>
  <option value="margin-box">margin-box</option>
  <option value="fill-box">fill-box</option>
  <option value="stroke-box">stroke-box</option>
  <option value="view-box">view-box</option>
</select>

JavaScript

var origin = document.getElementById("origin");
origin.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskOrigin = evt.target.value;
});

Résultat

Spécifications

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

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari (WebKit)
Support simple	(Oui)-webkit^[1]	Pas de support^[2]	?	?	(Oui)-webkit^[1]	(Oui)-webkit^[1]
`fill-box`, `stroke-box`, `view-box`	Pas de support	Pas de support	?	?	?	?
`content`, `padding`, `border`	1.0-webkit	Pas de support	Pas de support	?	Pas de support	4.0-webkit

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	Pas de support^[1]	?	?	?
`fill-box`, `stroke-box`, `view-box`	?	Pas de support	?	?	?
`content`, `padding`, `border`	2.1-webkit	Pas de support	?	?	3.2-webkit

[1] WebKit et Blink ne prennent pas encore en charge la valeur margin-box.

[2] Cette fonctionnalité n'est pas encore implémentée sur tous les canaux, elle est uniquement disponible pour les canaux Nightly et Dev Edition (cf. bug 1251161).

mask-origin

Syntaxe

Valeurs

Syntaxe formelle

Exemples

CSS

HTML

JavaScript

Résultat

Spécifications

Compatibilité des navigateurs

Étiquettes et contributeurs liés au document