Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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).

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.