Gradiente lineal vertical

28/Ene/2008 SVG , , , , 2 Comentarios

Gradiente Lineal Vertical

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.

  1.  
  2. <linearGradient id="gradiente_vertical" x1="valor" y1="valor" x2="valor" y2="valor">
  3. </linearGradient>
  4.  

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.

  1.  
  2. <linearGradient id="gradiente_vertical" x1="0%" y1="0%" x2="0%" y2="100%">
  3. </linearGradient>
  4.  

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.

  1.  
  2. <stop offset="20%" stop-color="#f00"/>
  3. <stop offset="80%" stop-color="#ff0"/>
  4.  

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:

  1.  
  2. <linearGradient id="gradiente_vertical" x1="0%" y1="0%" x2="0%" y2="100%">
  3. <stop offset="20%" stop-color="#f00"/>
  4. <stop offset="80%" stop-color="#ff0"/>
  5. </linearGradient>
  6.  

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

2 comentarios en “Gradiente lineal vertical”

Víctor Cuervo

lineadecodigo

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

Víctor Cuervo

migue vanegas

en conclusión para q sirve el vector gradiente?

Los comentarios están cerrados.