-moz-context-properties

No estándar
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: Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via chrome:// o resource:// URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner svg.context-properties.content.enabled en true.

Si mencionas una imagen SVG en una pagina web(<img> como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad-moz-context-properties, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de  context-fill.

Valor inicialnone
Applies toAny element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.
Heredableyes
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

/* 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;

Valores

fill
Expone el valor de fill determinado en la imagen del SVG.
stroke
Expone el valor de stroke determinado en la imagen del SVG..
fill-opacity
Expone el valor defill-opacity determinado en la imagen del SVG.
stroke-opacity
Expone el valor de stoke-opacity determinado en la imagen del SVG.

Sintaxis formal

none | [ fill | fill-opacity | stroke | stroke-opacity ]#

Ejemplo

En este ejemplo tenemos un SVG sencillo utilizando un elemento <img>.

Primero necesitas especificar en el elemento incrustado las propiedades cuyos valores quieres exponer al SVG, utilizando la propiedad -moz-context-properties. Por ejemplo:

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

Ahora que has hecho eso la imagen SVG puede utlizar los valores de fill y stroke , por ejemplo:

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

Aqui hemos puesto que la imagen src sea una URL de datos que contiene una imagen SVG simple; el <rect>de dentro ha sido hecho para coger sus valores de fill y stroke de fill y stroke puestos en el elemento <img>poniendo  context-fill/context-stroke en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.

Note: Puedes en contrar un ejemplo de ejecucion en Github.

Especificaciones

Esta propiedad no esta definida en ningun estándar de CSS

Browser compatibility

BCD tables only load in the browser