defs

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

A especificação do SVG permite que objetos gráficos sejam definidos para reuso posteriormente. Recomenda-se que, sempre que possível, os elementos referenciados sejam definidos dentro da tag defs. A definição destes elementos dentro de uma tag defs promove o entendimento do conteúdo do SVG e, consequentemente, promove a acessibilidade. Elementos gráficos definidos dentro da tag defs não serão diretamente renderizados. Você pode utilizar a tag <use> para renderizar tais elementos na janela de visualização.

Contexto de uso

CategoriasElemento recipiente, elemento estrutural
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação
Elementos descritivos
Elementos de forma
Elementos estruturais
Elementos de gradiente
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Exemplo

xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="https://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
        fill="url(#Gradient01)"  />
</svg>

Atributos

Atributos globais

Atributos específicos

Não existem atributos específicos.

DOM Interface

Este elemento implementa a interface SVGDefsElement.

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também