Ultima revisión 30/10/2012

LinearGradient: 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 lineales, lo que hacen es, fundir un color con otro de forma equilibrada para agregar un aire de profundidad al diseño. Los gradientes lineales pueden construirse horizontal o verticalmente.

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.

La etiqueta linearGradient hará un fundido de color ya sea horizontal o verticalmente. Dentro de cada etiqueta se debe proporcionar un atributo id para identificar la estructura o esquema y poder usarlo después mediante una dirección de referencia.

Utiliza las coordenadas (x, y) para definir el punto de cambio del color. Por ejemplo, al cambiar la dirección con respecto al eje x tu verás que el color se fusiona de izquierda a derecha. Si se cambia con respecto al eje y verás que el color se desplazará de arriba y abajo, o verticalmente.

x2 = "100%"    // El efecto de degradado sólo será horizontal
y2 = "100%"    // El efecto de degradado sólo será vertical.

El elemento stop

'LinearGradient' gestiona el flujo de color y stop define el punto de inicio. Para realizar un degradado, por lo menos, necesitas dos elementos stop.

Puedes definir los colores en formato RGB o en código hexadecimal en el atributo stop-color.

stop-opacity determinará el grado de transparencia que se desea aplicar al color de stop-color. Puedes usar 0 para indicar que es totalmente transparente y 1 para indicar opacidad total.

offset="10%"         // El fundido del color se iniciará en la marca de 10% dentro de la forma.
stop-color = "#CC0000"     // El fundido del color se hará en base al rojo.
stop-opacity="0.5"     // La opacidad será del 50%.
/>

<defs>
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
        <stop offset="100%" stop-color="#e0e0e0" stop-opacity="0.5"/>
    </linearGradient>
</defs>

El primer conjunto de coordenadas es el punto de partida para el degradado. El segundo conjunto identifica la dirección del gradiente. El elemento de compensación para el último color que aparece definirá en qué color deberá terminar. Esto es único para el último color pero para las líneas anteriores offset identificará el punto de partidad del nuevo color.

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" style="fill:url(#linearGradient)" /> 

rect creará un rectángulo o caja de 300x200 píxeles con un degradado desde blanco a gris claro empezando en la coordenada (0,0).