Ultima revisión 30/10/2012

RadialGradient: Cómo crear gradientes lineales en SVG

En los gráficos vectoriales escalables (SVG), vamos escribiendo las instrucciones para el parser de XML cree una imagen interpretando dichas instrucciones. Los gradientes o degradados radiales, lo que hacen es, imitar una fuente de luz que llega a un color sólido para crear un efecto de atenuación circular.

Para Trabajar con degradados, lo adecuado es que cree un elemento dentro de la etiqueta defs. El elemento defs, como ya se explicó en el capítulo cuándo utilizar el elemento defs en un gráfico SVG, funciona como un disparador que declara que se va a definir algo. En este caso, vamos a establecer un color degradado.

Dentro de cada etiqueta radialgradient se debe proporcionar un atributo id para identificar la estructura o esquema y poder usarlo después mediante una dirección de referencia.

En este caso se deben establecer tres coordenadas para describir el gradiente radial o circular:

Coordenadas de anchura y altura

• cx: Establece la anchura de la pendiente en porcentaje con respecto al tamaño del tapíz.
• cy: Establece la altura de la pendiente en porcentaje con respecto al tamaño del tapíz.

Coordenadas de dirección focal o flujos de luz

Piensa en fx y fy como coordenadas del punto central de la luz. Si dibuja un círculo grande, sólido en una pared y se mantiene una bombilla a la altura determinada, las coordenadas (fx, fy) serían el lugar antes de los golpes de luz que irradia hacia el exterior. El punto de luz de la bombilla formaría un patrón circular y (fx,fy) definirían el tamaño de ese campo circular tanto horizontal como verticalmente.

• fx: Establece la coordenada x dónde está la luz en porcentaje con respecto al tamaño del tapíz.
• fy: Establece la coordenada y dónde está la luz en porcentaje con respecto al tamaño del tapíz.

fx = "50%" fy = "50%"    // El objetivo de la radiante sería arriba y en el centro.
fx = "5%" fy = "5%"    // El objetivo de la radiente dirige la luz hacia la izquierda y ligeramente hacia abajo.

Es difícil visualizar las coordenadas de enfoque. Al crear el degradado radial, es probable que tengas que cambiar las coordenadas de un par de veces para conseguir el efecto deseado.

El Radio del gradiente

Un gradiente radial es una forma circular, por lo tanto, se requiere un radio.

• r: Establece el tamaño del gradiente en porcentaje con respecto al tamaño del tapíz.

Al igual que lineargradient, se definen los colores utilizando los elementos stop.

<stop offset="0" stop-color="#ff0000" stop-opacity="1" />
<stop offset="100%" stop-color="#ffff00" stop-opacity="1" /> 

stop-offset determina el lugar dónde este color se iniciará. Para el último color en la lista, offset le dice al parser dónde debe finalizar el color. La opacidad, claro está, es el grado de transparencia del color suministrado.

<defs>
    <radialGradient id="radialgradient" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" >
        <stop offset="0" stop-color="#ff0000" stop-opacity="1" />
        <stop offset="100%" stop-color="#ffff00" stop-opacity="0.5" />
    </radialGradient>
</defs>

Aplicar el degradado a una forma

Para aplicar el gradiente a una forma, debe identificar usando su atributo 'id' y la etiqueta de estilo de forma deseada.

<rect x="0" y="0" width="300" height="200" rx="10" ry="10" style="fill:url(#radialgradient)" /> 

rect creará un rectángulo o caja de 300x200 píxeles con un degradado desde rojo a amarillo posicionado en el centro del tapíz, con un tamaño del 50% y con una opacidad de opaca a semi-transparente desde el rojo hacia el amarillo.