<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
<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

Voir aussi