From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../fr/web/css/-moz-context-properties/index.html | 83 ++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 files/fr/web/css/-moz-context-properties/index.html (limited to 'files/fr/web/css/-moz-context-properties/index.html') diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..fbb2c9094c --- /dev/null +++ b/files/fr/web/css/-moz-context-properties/index.html @@ -0,0 +1,83 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
+ +

Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <img> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété -moz-context-properties.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Valeurs globales */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+
+ +

Valeurs

+ +
+
fill
+
Expose la valeur fill appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
stroke
+
Expose la valeur stroke appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
fill-opacity
+
Expose la valeur fill-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
stroke-opacity
+
Expose la valeur stroke-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans cet exemple, on embarque un SVG simple dans un élément <img>.

+ +

Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :

+ +
img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+}
+
+.img1 {
+    fill: lime;
+    stroke: purple;
+}
+ +

Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :

+ +
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+ +

Ici, l'attribut src de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <rect> est paramétré afin de récupérer les valeurs fill et stroke telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <img> grâce aux mots-clés context-fill/context-stroke. On utilise aussi une couleur de secours pour le remplissage (fill) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.

+ +
+

Note : vous pouvez consulter un exemple complet sur notre dépôt Github.

+
+ +

Spécifications

+ +

Cette propriété n'est définie dans aucun standard CSS.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-context-properties")}}

-- cgit v1.2.3-54-g00ecf