Unidad 16. Introducción a SVG. Gráficos redimensionables (XIV)



16.7. Gradientes

linearGradient. Un gradiente lineal crea un degradado entre dos o más colores. Para definir el gradiente utilizamos el elemento linearGradient que colocamos dentro de un elemento desc, luego asignamos ese gradiente al relleno de un objeto. Vamos a ver los parámetros principales mediante el siguiente ejemplo.

<defs>
  <linearGradient id="ejemGradiente1">
   <stop offset="5%"  stop-color="yellow"/>
   <stop offset="95%" stop-color="red"/>
  </linearGradient>
</defs>
<rect fill="url(#ejemGradiente1)"
x="10" y="10" width="150" height="100"/>

El elemento linearGradient en este ejemplo tiene como identificador ejemGradiente1, y contiene dos elementos stop.

El elemento stop mediante stop-color indica el color, y mediante offset donde comienza el degradado. En este ejemplo el primer color es el amarillo y comienza el gradiente en el 5% de la anchura del objeto, el segundo color es el rojo y acaba el gradiente en el 95% de la anchura.

Aplicamos el degradado a un rectángulo asignando al relleno el gradiente que hemos definido mediante fill="url(#ejemGradiente1)

En el siguiente ejemplo vemos el efecto de cambiar los valores de offset="30%" y offset="70%", vemos como el 30% inicial del rectángulo es amarillo puro y el 30% final es rojo puro mientras que el degradado se aplica en el 40% del centro del rectángulo.

<linearGradient id="ejemGradiente2">
<stop offset="30%" stop-color="yellow"/>
<stop offset="70%" stop-color="red"/>
</linearGradient>

En el siguiente ejemplo vemos la forma de definir la línea recta que marca la dirección del gradiente, para ello se define un punto inicial (x1,y2) y un punto final (x2,y2). Si no se indican estos puntos, por defecto se toman los valores que indican la dirección horizontal, como ha sucedido en los anteriores ejemplos.

En el siguiente ejemplo indicamos la dirección vertical con los puntos (0,0) y (0,100%), con el 100% indicamos valor más alto de la coordenada y para ese valor de la coordenada x, en nuestro caso corresponde con la esquina inferior izquierda del rectángulo.

<linearGradient id="ejemGradiente3" x1="0" y1="0" x2="0" y2="100%">
<stop offset="5%" stop-color="yellow"/>
<stop offset="95%" stop-color="red"/>
</linearGradient>

En el siguiente ejemplo hemos definido una línea de dirección del gradiente en diagonal que va desde el punto (0,0) al (100%,100%), es decir desde la esquina superior izquierda a la esquina inferior derecha del rectángulo.

<linearGradient id="ejemGradiente4" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="5%" stop-color="yellow"/>
<stop offset="95%" stop-color="red"/>
</linearGradient>

Y en el último ejemplo hemos definido tres colores, amarillo, gris y rojo, con offsets de 5%, 50%, y 95% respectivamente.

  <linearGradient id="ejemGradiente5">
<stop offset="5%" stop-color="yellow"/>
<stop offset="50%" stop-color="grey"/>
<stop offset="95%" stop-color="red"/>
</linearGradient>

Enero-2019 (V 2.0)
Pág. 16.14
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.