radialGradient

radialGradient permite que autores definam gradientes radiais para preencher ou tracejar elementos gráficos

Contexto de uso

CategoriasElemento gradiente
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos descritivos
<animate>, <animateTransform>, <set>, <stop>

Exemplo

Código fonte Resultado
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient id="MyGradient">
            <stop offset="10%" stop-color="gold"/>
            <stop offset="95%" stop-color="green"/>
        </radialGradient>
    </defs>

    <circle fill="url(#MyGradient)"
            cx="60" cy="60" r="50"/>
</svg>

» radialGradient.svg

Atributos

Atributos globais

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGRadialGradientElement.

Compatibilidade dos navegadores

Recurso Chrome Firefox (Gecko) IE Opera Safari
Suporte básico 1.0 1.5 (1.8) 9.0 9.0 3.0.4
Recurso Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 3.0 1.0 (1.8) Não suportado (Yes) 3.0.4

A tabela é baseada nessas fontes.

Notas específicas WebKit

WebKit não suporta interpolação de cor (bug 6034).

Relacionado

Etiquetas do documento e colaboradores

 Colaboradores desta página: Sebastianz, caio
 Última atualização por: Sebastianz,