<mask>
======

L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété `mask`.

Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage (`<clipPath>`) ne permet pas.

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Tous les pixels blancs sont visibles -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Tous les pixels noirs sont invisibles -->
    <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
```

Attributs
---------

`height`

 Définit la hauteur du masque.
 *Valeur*: **<length>** (en-US) ; Valeur par défaut: `120%`; *Animation*: **oui**

`maskContentUnits (en-US)`

 Définit le système de coordonnées pour le contenu du `<mask>`.
 *Valeur*: `userSpaceOnUse`|`objectBoundingBox` ; *Valeur par défaut*: `userSpaceOnUse`; *Animation*: **oui**

`maskUnits (en-US)`

 Définit le système de coordonnées pour les attributs `x`, `y (en-US)`, `width` et `height` du `<mask>`.
 *Valeur*: `userSpaceOnUse`|`objectBoundingBox` ; *Valeur par défaut*: `objectBoundingBox`; *Animation*: **oui**

`x`

 Définit la coordonnée de l'axe x du coin supérieur gauche du masque.
 *Valeur*: **<coordinate>** (en-US) ; *Valeur par défaut*: `-10%`; *Animation*: **oui**

`y (en-US)`

 Définit la coordonnée de l'axe y du coin supérieur gauche du masque.
 *Valeur*: **<coordinate>** (en-US) ; *Valeur par défaut*: `-10%`; *Animation*: **oui**

`width`

 Définit la largeur du masque.
 *Valeur*: **<length>** (en-US) ; Valeur par défaut: `120%`; *Animation*: **oui**

### Attributs globaux

Attributs de base

Notamment: `id (en-US)`

Attributs de style
`class (en-US)`, `style`
Attributs de traitement conditionnel

Notamment: `requiredExtensions`, `systemLanguage (en-US)`

Attributs de présentation

Notamment: `clip-path`, `clip-rule (en-US)`, `color`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask`, `opacity (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

Notes d'usage
-------------

|  |  |
| --- | --- |
| Catégories | Élément conteneur |
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre :Éléments d'animationÉléments descriptifsÉléments de formesÉléments structurelsÉléments de dégradés`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>` (en-US), `<style>`, `<switch>`, `<text>`, `<view>` (en-US) |

Spécifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # MaskElement |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Élément de détourage: `<clipPath>`
* Propriétés CSS de masque: `mask`, `mask-image`,`mask-mode`, `mask-repeat`, `mask-position`, `mask-clip`, `mask-origin`, `mask-composite`, `mask-size`, `pointer-events`