Gradiente lineal vertical Enero 28, 2008
Publicado por lineadecodigo en : SVG , trackback
Un gradiente lineal es una transición de colores a lo largo de un vector. Normalmente de dos colores, aunque puede ser de tantos como queramos.
Cuando dibujamos gradientes lineales, estos, pueden ser de tres formas:
- Horizontales
- Verticales
- Angulares
La etiqueta SVG que nos sirve para definir gradientes es linearGradient. La cual, mediante coordenadas x1,y1 y x2,y2 identifica el inicio y el fin del vector que coordina el gradiente.
En el caso que nos consta, gradiente lineal vertical, el "truco" está en el manejo de las coordenadas del gradiente. Mediante estas coordenadas lo que definimos es donde va a iniciar y donde va a terminar el gradiente.
A si que lo que tenemos que hacer es que las coordenadas x1 y x2 deben de ser iguales, mientras que las coordenadas y1 e y2 deben de ser diferentes.
Además a la etiqueta linearGradient le podemos anidar la etiqueta stop. Esta etiqueta nos ayuda a definir con que color iniciamos y con cual acabamos el gradiente. Para ello utiliza un atributo offset de posicionamiento de inicio del color y otro atributo denominado stop-color para indicar el color que se utiliza.
En este código indicaríamos que al 20% del vector se empieza a utilizar el color rojo (#f00) y que al 80% del vector pasamos al color amarillo (#ff0).
Veamos como quedaría todo el código de nuestro gradiente lineal vertical:
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Gradiente linear angular en SVG
- Circulo con gradiente lineal
- Borde con gradiente lineal
- Dibujando un polígono: triángulo
- Dibujar una línea en SVG
Enviar entrada por email
| 
Imprimir
| 4441 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
en conclusión para q sirve el vector gradiente?
@migue vanegas,
Para establecer una línea de degradado que puede ser aplicada sobre cualquier objeto SVG.
Si trazas una línea que vaya del rojo al amarillo como en el artículo, esta la puedes representar con un vector y cada punto del vector tener un color asociado. De esta forma se ve el gradiente.