Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

Nota: Essa característica está disponível desde o Fireforx 55, mas só é suportada atualmente com imagens SVG carregadas via URLs chrome:// ou resource://. Para experimentar o recurso em SVG na web é necessário definir svg.context-properties.content.enabled para true.

Se você referenciar uma imagem SVG em uma página web (como com o elemento <img> ou como imagem de fundo), a imagem SVG pode coordenar com o elemento de incorporação (seu contexto) para que a imagem adote os valores da propriedade definidos no elemento de incorporação. Para fazer isso o elemento de incorporação pecisa listar as propriedades que precisarão ficar disponíveis para a imagem listando-os como valores da propriedade de -moz-context-properties, e a imagem precisa optar em usar essas propriedades usando valores como o context-fill.

Initial valuenone
Aplica-se aAny element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.
Inheritedyes
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

/* Valores-chave */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Valores globais */
-moz-context-properties: inherit;
-moz-context-properties: initial;
-moz-context-properties: unset;

Valores

fill
Expõe o valor fill definido na imagem para o SVG incorporado.
stroke
Expõe o valor stroke definido na imagem para o SVG incorporado.
fill-opacity
Expõe o valor fill-opacity definido na imagem para o SVG incorporado.
stroke-opacity
Expõe o valor stoke-opacity definido na imagem para o SVG incorporado.

Sintaxe formal

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

Exemplo

Nesse exemplo temos um simples SVG incorporado usando o elemento <img>.

Você precisa primeiro especificar no elemento de incorporação as propriedades cujos valores deseja expor ao SVG incorporado, usando a propriedade -moz-context-properties. Por exemplo:

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

Agora que você o fez, a imagem SVG pode usar os valores das propriedades fill e stroke, por exemplo:

<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 nós definimos a imagem src para uma URI de dado contendo uma simples imagem SVG; o <rect> foi feito para receber os valores de fill e stroke de fill e stroke definidos no elemento <img> dando a eles a palavras-chave context-fill/context-stroke em seus valores, juntamente com a cor de fallback para o preenchimento (vermelho) que será usada caso o SVG seja carregado sozinho em uma janela top-level (onde não terá elemento de contexto para prover valores de contexto). Note que se uma cor é definida diretamente no SVG, e a cor de contexto é também especificada, a cor de contexto sobrescreve a cor direta.

Note: Você pode encontrar um exemplo funcinal no Github.

Especificações

Essa propriedade não está definida em nenhum padrão CSS.

Compatibilidade de navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-moz-context-properties
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 55
Notes Disabled
Full support 55
Notes Disabled
Notes With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
Disabled 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 No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 55
Notes Disabled
Full support 55
Notes Disabled
Notes With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
Disabled 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 No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, dekxside
Última atualização por: mdnwebdocs-bot,