SVG Gradient - Lineal

SVG Gradient

El gradiente es una suave transición de uno a otro color a color. Además, la transición se puede aplicar a una pluralidad de colores en el mismo elemento.

Hay dos tipos principales de SVG Gradiente:

lineal
radial

SVG gradientes lineales - <linearGradient>

<LinearGradient> elemento se utiliza para definir un gradiente lineal.

<LinearGradient> etiqueta debe estar anidada dentro de <defs> interior. etiqueta <Def> son las definiciones siglas, tales como elementos especiales que se pueden definir como gradiente.

gradiente lineal se puede definir como gradiente horizontal, vertical o ángulo:

Cuando Y1 e Y2 son iguales, pero no ambos x1 y x2, crear un gradiente horizontal
Cuando X1 y X2 igual, Y1 e Y2 no son los mismos, se puede crear un gradiente vertical
Cuando X1 y X2 son diferentes y y1 e y2 no son los mismos, se puede crear un ángulo de gradiente

Ejemplo 1

Se define el gradiente lineal horizontal del amarillo al óvalo rojo:

Aquí está el código SVG:

Ejemplos

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

análisis de código:

atributo id <linearGradient> etiqueta puede ser un nombre único para la definición del degradado
<LinearGradient> X1 etiqueta, X2, Y1, Y2 atributo define el comienzo y el final del gradiente
gama de color del degradado por dos o más colores. Cada color por una etiqueta <stop> para especificar. desplazamiento se utiliza para definir la posición de inicio y al final del gradiente.
Llenar elemento de propiedad de enlazar con el gradiente de la elipse