use

by 1 colaborador:

Este artigo necessita de uma revisão editorial.

O elemento use cria nós dentro de um documento SVG, e os duplica em outro local. O efeito é o mesmo se os nós forem profundamente clonados em um DOM não exposto, e então colado onde o elemento use é, muito parecido com elementos de template clonados no HTML5. Como os nós clonados não são expostos, é preciso ter cuidado ao utilizar CSS para estilizar o elemento use e seus descendentes ocultos. Atributos CSS não é garantidamente herdado pelos ocultos, DOM clonada a não ser que você deixe a requisição explicita utilizando herança CSS.

Por motivos de segurança, alguns navegadores poderão aplicar uma política de "mesma origem" na utilização de elementos, bem como poderão recusar o carregamento de uma URI de "multiplas origens" dentro do atributo xlink:href.

Contexto de uso

Categorias Elementos gráficos, Elemento referenciando gráfico, Elemento estrutural
Conteúdo permitido Qualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação »
Elementos descritivos »
Documento normativo SVG 1.1 (2ª Edição)

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

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
Load from external URI (Yes) (Yes) Não suportado (Yes) (Yes)
Load from data: URI ? 10.0 (10.0) ? ? ?
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) (Yes) ? (Yes) (Yes)
Load from external URI (Yes) (Yes) ? (Yes) (Yes)
Load from data: URI (Yes) (Yes) ? (Yes) (Yes)

Etiquetas do documento e colaboradores

Contributors to this page: caio
Última atualização por: caio,