En SVG, il est possible de définir des éléments ou objets graphiques <g> en tant que masque par rapport à l'objet courant en arrière plan. Un masque est défini par l'élément mask. Un masque est utilisé/référencé en utilisant l'attribut mask.
Contexte d'utilisation
| 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 Eléments de dégradés <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Exemple
| Code source |
|---|
Unable to find file mask.svg |
| Résultat |
Unable to find file mask.svg |
» mask.svg
Attributs
Attributs globaux
- Attributs à conditions »
- Attributs du coeur »
- Attributs de présentation »
classstyleexternalResourcesRequired
Attributs spécifiques
Interface DOM
Cette élément implémente l'interface SVGMaskElement.
Spécifications
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Module Level 1 La définition de '<mask>' dans cette spécification. |
Candidat au statut de recommandation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<mask>' dans cette spécification. |
Recommendation | Initial definition |
Support navigateur
Cette table de compatibilité est générée depuis des données structurées. Si vous voulez contribuer à maintenir ces données, veuillez vous référer au dépôt Github suivant https://github.com/mdn/browser-compat-data dans lequel vous pouvez effectuer des modifications à l'aide de requêtes de tirage (Pull Requests).
Update compatibility data on GitHub
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet Oui | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
maskUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
maskContentUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
x | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet Oui | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
y | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet Oui | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
height | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet Oui | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
width | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet Oui | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue