<mask>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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
<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> ; Valeur par défaut:
120%
; Animation: oui maskContentUnits
-
Définit le système de coordonnées pour le contenu du
<mask>
. Valeur:userSpaceOnUse
|objectBoundingBox
; Valeur par défaut:userSpaceOnUse
; Animation: oui maskUnits
-
Définit le système de coordonnées pour les attributs
x
,y
,width
etheight
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> ; Valeur par défaut:
-10%
; Animation: oui y
-
Définit la coordonnée de l'axe y du coin supérieur gauche du masque. Valeur: <coordinate> ; Valeur par défaut:
-10%
; Animation: oui width
-
Définit la largeur du masque. Valeur: <length> ; Valeur par défaut:
120%
; Animation: oui
Attributs globaux
- Attributs de base
-
Notamment:
id
- Attributs de style
- Attributs de traitement conditionnel
-
Notamment:
requiredExtensions
,systemLanguage
- Attributs de présentation
-
Notamment:
clip-path
,clip-rule
,color
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
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> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Spécifications
Specification |
---|
CSS Masking Module Level 1 # MaskElement |
Compatibilité des navigateurs
BCD tables only load in the browser
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