Gradientes SVG - Lineal

Gradientes SVG

Un degradado es una transición suave de un color a otro. Además, se pueden aplicar varias transiciones de color a un mismo elemento.

Hay dos tipos principales de degradados en SVG:

• Lineal
• Radial

SVG Gradiente lineal - <linearGradient>

El elemento <linearGradient> se utiliza para definir un degradado lineal.

El elemento <linearGradient> debe estar anidado dentro de una etiqueta <defs>. La etiqueta <defs> es la abreviatura de definiciones y contiene definiciones de elementos especiales (como degradados).

Los degradados lineales se pueden definir como degradados horizontales, verticales o angulares:

• Los gradientes horizontales se crean cuando y1 e y2 son iguales y x1 y x2 difieren
• Los gradientes verticales se crean cuando x1 y x2 son iguales y y1 e y2 difieren
• Los gradientes angulares se crean cuando x1 y x2 difieren y y1 e y2 difieren

Ejemplo 1

Defina una elipse con un degradado lineal horizontal de amarillo a rojo:

Aquí está el código SVG:

Explicación del código:

• El atributo id de la etiqueta <linearGradient> define un nombre único para el degradado
• Los atributos x1, x2, y1, y2 de la etiqueta <linearGradient> definen la posición inicial y final del degradado
• La gama de colores de un degradado puede estar compuesta por dos o más colores. Cada color se especifica con una etiqueta <stop>. El atributo de compensación se usa para definir dónde comienza y termina el color degradado
• El atributo de relleno vincula el elemento de elipse al degradado.

Ejemplo 2

Defina una elipse con un degradado lineal vertical de amarillo a rojo:

Aquí está el código SVG:

Ejemplo 3

Defina una elipse con un degradado lineal horizontal de amarillo a rojo y agregue un texto dentro de la elipse:

Aquí está el código SVG:

Explicación del código:

• El elemento <text> se usa para agregar un texto