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.
Please take two minutes to fill out our short survey.
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
| Categorias | Elemento recipiente, elemento estrutural |
|---|---|
| Conteúdo permitido | Qualquer 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.