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.
Note: This feature is available since Firefox 55, but is only currently supported with SVG images loaded via chrome://
or resource://
URLs. To experiment with the feature in SVG on the Web it is necessary to set the svg.context-properties.content.enabled
pref to true
.
If you reference an SVG image in a webpage (such as with the <img>
element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties
property, and the image needs to opt in to using those properties by using values such as the context-fill
value.
Syntax
/* Keyword values */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /* Global values */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: 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. - fill-opacity
- Expose the
fill-opacity
value set on the image to the embedded SVG. - stroke-opacity
- Expose the
stoke-opacity
value set on the image to the embedded SVG.
Formal syntax
none | [ fill | stroke ]#
Example
In this example we have a simple SVG embedded using an <img>
element.
You first need to specify on the embedding element the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties
property. For example:
.img1 { width: 100px; height: 100px; -moz-context-properties: fill, stroke; fill: lime; stroke: purple; }
Now you've done this, the SVG image can use the values of the fill
and stroke
properties, 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 for the fill (red) which will be used in the case that the SVG is loaded standalone in a top-level window (where it will have no context element to provide context values). 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.
Initial value | none |
---|---|
Applies to | replaced elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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.