1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: '-moz-context-properties'
slug: Web/CSS/-moz-context-properties
translation_of: Web/CSS/-moz-context-properties
---
<div>{{CSSRef}}{{Non-standard_header}}
<div class="note">
<p><strong>Nota</strong>: Essa característica está disponível desde o Fireforx 55, mas só é suportada atualmente com imagens SVG carregadas via URLs <code>chrome://</code> ou <code>resource://</code>. Para experimentar o recurso em SVG na web é necessário definir <code>svg.context-properties.content.enabled</code> para <code>true</code>.</p>
</div>
</div>
<p>Se você referenciar uma imagem SVG em uma página web (como com o elemento {{htmlelement("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 <strong><code>-moz-context-properties</code></strong>, e a imagem precisa optar em usar essas propriedades usando valores como o <code>context-fill</code>.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush:css">/* 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;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>fill</code></dt>
<dd>Expõe o valor <code>fill</code> definido na imagem para o SVG incorporado.</dd>
<dt><code>stroke</code></dt>
<dd>Expõe o valor <code>stroke</code> definido na imagem para o SVG incorporado.</dd>
<dt><code>fill-opacity</code></dt>
<dd>Expõe o valor <code>fill-opacity</code> definido na imagem para o SVG incorporado.</dd>
<dt><code>stroke-opacity</code></dt>
<dd>Expõe o valor <code>stoke-opacity</code> definido na imagem para o SVG incorporado.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
{{csssyntax}}
<h2 id="Exemplo">Exemplo</h2>
<p>Nesse exemplo temos um simples SVG incorporado usando o elemento <code><img></code>.</p>
<p>Você precisa primeiro especificar no elemento de incorporação as propriedades cujos valores deseja expor ao SVG incorporado, usando a propriedade <code>-moz-context-properties</code>. Por exemplo:</p>
<pre class="brush: css">.img1 {
width: 100px;
height: 100px;
-moz-context-properties: fill, stroke;
fill: lime;
stroke: purple;
}</pre>
<p>Agora que você o fez, a imagem SVG pode usar os valores das propriedades {{cssxref("fill")}} e {{cssxref("stroke")}}, por exemplo:</p>
<pre class="brush: html"><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>"></pre>
<p>Aqui nós definimos a imagem <code>src</code> para uma URI de dado contendo uma simples imagem SVG; o <code><rect></code> foi feito para receber os valores de <code>fill</code> e <code>stroke</code> de {{cssxref("fill")}} e {{cssxref("stroke")}} definidos no elemento <code><img></code> dando a eles a palavras-chave <code>context-fill</code>/<code>context-stroke</code> 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.</p>
<div class="note">
<p><strong>Note</strong>: Você pode encontrar um <a href="https://mdn.github.io/css-examples/moz-context-properties/">exemplo funcinal no Github</a>.</p>
</div>
<h2 id="Especificações">Especificações</h2>
<p>Essa propriedade não está definida em nenhum padrão CSS.</p>
<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>
<p>{{Compat("css.properties.-moz-context-properties")}}</p>
|
