Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
-moz-context-properties
ExperimentalNo estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 55
Notas Deshabilitado
Soporte completo 55
Notas Deshabilitado
Notas With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
Deshabilitado From version 55: this feature is behind the svg.context-properties.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo 55
Notas Deshabilitado
Soporte completo 55
Notas Deshabilitado
Notas With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
Deshabilitado From version 55: this feature is behind the svg.context-properties.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, Adorta4
Última actualización por: mdnwebdocs-bot,