From 88dda3c00eefc18a29447e99ebd3177925602b52 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:45 +0100 Subject: convert content to md --- files/fr/web/svg/element/mask/index.md | 183 +++++++++++++++------------------ 1 file changed, 82 insertions(+), 101 deletions(-) (limited to 'files/fr/web/svg/element/mask') diff --git a/files/fr/web/svg/element/mask/index.md b/files/fr/web/svg/element/mask/index.md index 20f0088b0d..5341381e54 100644 --- a/files/fr/web/svg/element/mask/index.md +++ b/files/fr/web/svg/element/mask/index.md @@ -9,104 +9,85 @@ tags: - SVG Container translation_of: Web/SVG/Element/mask --- -
{{SVGRef}}
- -

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é {{SVGAttr("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 ({{SVGElement('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>
- -

{{EmbedLiveSample('exemple', 100, 100)}}

- -

Attributs

- -
-
{{SVGAttr("height")}}
-
Définit la hauteur du masque.
- Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
-
{{SVGAttr("maskContentUnits")}}
-
Définit le système de coordonnées pour le contenu du <mask>.
- Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: userSpaceOnUse; Animation: oui
-
{{SVGAttr("maskUnits")}}
-
Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du <mask>.
- Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: objectBoundingBox; Animation: oui
-
{{SVGAttr("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
-
{{SVGAttr("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
-
{{SVGAttr("width")}}
-
Définit la largeur du masque.
- Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
-
- -

Attributs globaux

- -
-
Attributs de base
-
Notamment: {{SVGAttr('id')}}
-
Attributs de style
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Attributs de traitement conditionnel
-
Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Attributs de présentation
-
Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
- -

Notes d'usage

- -

{{svginfo}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSS Masks', '#MaskElement', '<mask>')}}{{Spec2('CSS Masks')}} 
{{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}}{{Spec2('SVG1.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("svg.elements.mask")}}

- -

Voir aussi

- - +{{SVGRef}} + +L'élément **``** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("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 ({{SVGElement('clipPath')}}) ne permet pas. + +## Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + + + + + + +``` + +{{EmbedLiveSample('exemple', 100, 100)}} + +## Attributs + +- {{SVGAttr("height")}} + - : Définit la hauteur du masque. + _Valeur_: [**\**](/docs/Web/SVG/Content_type#Length) ; Valeur par défaut: `120%`; _Animation_: **oui** +- {{SVGAttr("maskContentUnits")}} + - : Définit le système de coordonnées pour le contenu du ``. + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** +- {{SVGAttr("maskUnits")}} + - : Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du ``. + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `objectBoundingBox`; _Animation_: **oui** +- {{SVGAttr("x")}} + - : Définit la coordonnée de l'axe x du coin supérieur gauche du masque. + _Valeur_: [**\**](/docs/Web/SVG/Content_type#Coordinate) ; _Valeur par défaut_: `-10%`; _Animation_: **oui** +- {{SVGAttr("y")}} + - : Définit la coordonnée de l'axe y du coin supérieur gauche du masque. + _Valeur_: [**\**](/docs/Web/SVG/Content_type#Coordinate) ; _Valeur par défaut_: `-10%`; _Animation_: **oui** +- {{SVGAttr("width")}} + - : Définit la largeur du masque. + _Valeur_: [**\**](/docs/Web/SVG/Content_type#Length) ; Valeur par défaut: `120%`; _Animation_: **oui** + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} + +## Notes d'usage + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} |   | +| {{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.mask")}} + +## Voir aussi + +- Élément de détourage: {{SVGElement("clipPath")}} +- Propriétés CSS de masque: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}} -- cgit v1.2.3-54-g00ecf