MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

-moz-context-properties

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

If you embed an SVG image in a webpage using a replaced element (commonly, the <img> element), you can get the embedded image to adopt property values set on the <img> (or whatever context the SVG is embedded in) using the -moz-context-properties property.

Syntax

/* Keyword values */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Global values */
-moz-stack-sizing: inherit;
-moz-stack-sizing: initial; 
-moz-stack-sizing: unset;

Values

fill
Expose the fill value set on the image to the embedded SVG.
stroke
Expose the stoke value set on the image to the embedded SVG.

Formal syntax

Syntax not found in DB!

Example

In this example we have a simple SVG embedded using an <img> element.

You first need to specify the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties property. For example:

img {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
}

.img1 {
    fill: lime;
    stroke: purple;
}

Now you've done this, you can use the fill and stroke values in your SVG, for example:

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

Here we've set the image src to a data URI containing a simple SVG image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color in the case of the fill. Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.

Note: You can find a working example on Github.

Value not found in DB!

Specifications

This property it is not defined in any CSS standard.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? 55 (55)[1] No support ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support ? 55.0 (55)[1] No support ? ? ?

This feature is available since Firefox 55, but only enabled fully on Nightly; on other versions of Firefox you'll have to set the svg.context-properties.content.enabled pref to true, if the images aren't referenced via a chrome:// or resource:// URL.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, sfoster
 Last updated by: chrisdavidmills,