SVG Gradientes - Lineal

Los degradados SVG

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

Hay dos tipos principales de gradientes en SVG:

• Lineal
• Radial

SVG Gradiente Lineal - <linearGradient>

La <linearGradient> elemento se utiliza para definir un gradiente lineal.

La <linearGradient> elemento debe estar anidada dentro de un <defs> etiqueta. La <defs> etiqueta es la abreviatura de las definiciones y contiene la definición de los elementos especiales (such as gradients) .

gradientes lineales se pueden definir como gradientes horizontales, verticales o angulares:

• gradientes horizontales se crean cuando Y1 e Y2 son iguales y X1 y X2 son diferentes
• gradientes verticales se crean cuando X1 y X2 son iguales y Y1 e Y2 son diferentes
• gradientes angulares se crean cuando X1 y X2 son diferentes y Y1 e Y2 son diferentes

Ejemplo 1

Definir una elipse con un gradiente lineal horizontal de amarillo a rojo:

Aquí está el código SVG:

Code explanation:

• La id atributo de la <linearGradient> etiqueta define un nombre único para el gradiente
• El x1, x2, y1, y2 atributos de la <linearGradient> etiqueta de definir la posición inicial y final del gradiente
• La gama de colores para un gradiente puede estar compuesto de dos o más colores. Cada color se especifica con un <stop> etiqueta. El offset atributo se utiliza para definir dónde comienza y termina el color del gradiente
• El fill atributo vincula el elemento elipse con el gradiente

Ejemplo 2

Definir una elipse con un gradiente lineal vertical del amarillo al rojo:

Aquí está el código SVG:

Ejemplo 3

Definir una elipse con un gradiente lineal horizontal de amarillo a rojo, y añadir un texto dentro de la elipse:

Aquí está el código SVG:

Code explanation:

• La <text> elemento se utiliza para añadir un texto