From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/-moz-context-properties/index.html | 79 ++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/pt-br/web/css/-moz-context-properties/index.html (limited to 'files/pt-br/web/css/-moz-context-properties/index.html') diff --git a/files/pt-br/web/css/-moz-context-properties/index.html b/files/pt-br/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..21f99210e6 --- /dev/null +++ b/files/pt-br/web/css/-moz-context-properties/index.html @@ -0,0 +1,79 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}} +
+

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 {{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 -moz-context-properties, e a imagem precisa optar em usar essas propriedades usando valores como o context-fill.

+ +

{{cssinfo}}

+ +

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

+ +
{{csssyntax}}
+ +

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 {{cssxref("fill")}} e {{cssxref("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 {{cssxref("fill")}} e {{cssxref("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

+ + + +

{{Compat("css.properties.-moz-context-properties")}}

-- cgit v1.2.3-54-g00ecf