From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/svg/element/use/index.html | 156 +++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/pt-br/web/svg/element/use/index.html (limited to 'files/pt-br/web/svg/element/use/index.html') diff --git a/files/pt-br/web/svg/element/use/index.html b/files/pt-br/web/svg/element/use/index.html new file mode 100644 index 0000000000..7502e54a6e --- /dev/null +++ b/files/pt-br/web/svg/element/use/index.html @@ -0,0 +1,156 @@ +--- +title: use +slug: Web/SVG/Element/use +tags: + - Elemento + - Gráficos(2) + - Referencia + - Referência(2) + - SVG + - graficos +translation_of: Web/SVG/Element/use +--- +
{{SVGRef}}
+ +

O elemento use cria instâncias dentro de um documento SVG e os duplica em outro local. O efeito é o mesmo se as instâncias forem profundamente clonadas em um DOM não exposto, e então coladas onde o elemento use está (muito parecido com elementos de template clonados no HTML5). Como as instâncias clonadas não são expostas, é preciso ter cuidado ao utilizar CSS para estilizar o elemento use e seus descendentes ocultos. Não há garantia de que atributos CSS sejam herdados pelo DOM oculto e clonado, a menos que você os solicite explicitamente usando herança CSS.

+ +

Por motivos de segurança alguns navegadores poderão aplicar uma política de "mesma origem" com elementos use, bem como poderão recusar o carregamento de uma URI de múltiplas origens no atributo xlink:href.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    .classA { fill:red }
+  </style>
+  <defs>
+    <g id="Port">
+      <circle style="fill:inherit" r="10"/>
+    </g>
+  </defs>
+
+  <text y="15">black</text>
+  <use x="50" y="10" xlink:href="#Port" />
+  <text y="35">red</text>
+  <use x="50" y="30" xlink:href="#Port" class="classA"/>
+  <text y="55">blue</text>
+  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
+ </svg>
+
+ +

 

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGUseElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from external URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{CompatNo()}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from data: URI{{ CompatUnknown() }}{{ CompatGeckoDesktop("10.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from external URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from data: URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
-- cgit v1.2.3-54-g00ecf