Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 99

Visitas el mes pasado: 101

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




SVG (VI)

Gradiente de color

imagen html5

Definición

Un gradiente de color, también llamado degradado de color, es una transicion de manera suave desde un color a otro, pasando por todas las gamas intermedias entre ellos.

En SVG tenemos dos tipos de gradientes, los gradientes lineales y los gradientes radiales.

Los gradientes pueden aplicarse a cualquier elemento al que le hayamos dado color, tanto en su relleno (fill) como en el trazado del borde (stroke).


Gradiente lineal

Para crear un gradiente lineal utilizaremos la etiqueta linearGradient.

Este elemento y otros similares se suelen incluir dentro de la etiqueta defs:

<defs>
   <linearGradient ........ >
      ......... 
   </linearGradient>
</defs>

La etiqueta <defs> ...</defs> no incluye ningún tipo de elemento en la página, y sólo sirve para organizar el contenido. Normalmente incluimos en esta etiqueta una serie de etiquetas que sirven para definir algunos elementos que incluiremos más adelante en la página, como por ejemplo, los gradientes.

En el esquema anterior las lineas de puntos serán sustituidas por atributos y etiquetas que crean el gradiente.

Vemos aquí a la derecha un ejemplo de gradiente lineal en el que el fondo cambia gradualmente de unos colores a otros.

La etiqueta defs indica que lo que pondremos dentro serán definiciones y no parte del dibujo. En este caso definimos un degradado lineal con la etiqueta linearGradient. Una vez definido tendremos que hacer una referencia al degradado desde el dibujo para aplicarlo.

La etiqueta linearGradient puede llevar los siguientes atributos:

Nos falta definir los colores del degradado. Para ello, dentro de la etiqueta linearGradient indicamos los colores mediante la etiqueta stop. Esta etiqueta se repite para cada cambio de color en el degradado y tiene la siguiente sintaxis:

<stop offset="<num>" stop-color="<color>"/>

El atributo offset tiene como valor un número decimal del 0 al 1. Coloca un marcador en la línea que va desde el punto de inicio (en el 0) al punto final (en el 1) del degradado. Es conveniente poner siempre como mínimo dos etiquetas stop una stop offset="0" para el color de inicio, y otra stop offset=1 para el color final. entre medio podemos poner otros colores mediante decimales entre el 0 y el 1.

El atributo color-stop indica el color que habrá en ese punto. Entre un punto y otro se produce el cambio progresivo de color.

Hasta aquí el contenido de la etiqueta linearGradient con la que definimos el gradiente de color. Ahora queda incluir el gradiente de color en un elemento, como color de relleno del mismo, para ello en la propiedad o atributo fill haremos referencia al degradado, poniendo el siguiente valor:

fill="url(#nombre_id)"

Como valor ponemos la palabra "url" y después entre paréntesis y con un signo de almohadilla delante (#) el nombre del atributo id que le hemos dado a la gradiente.

Vemos un ejemplo que nos da como resultado el círculo que vemos arriba a la derecha. Este es su código.

<svg width=250 height=250>
<defs>
<linearGradient id="grad1"
    x1="50%" y1="0%" x2="50%" y2="100%">
    <stop offset="0" stop-color="silver"/>
    <stop offset="0.2" stop-color="blue"/>
    <stop offset="0.5" stop-color="lime"/>
    <stop offset="0.8" stop-color="blue"/>
    <stop offset="1" stop-color="silver"/>
</linearGradient>
</defs>
<circle cx=125 cy=125 r=120 fill="url(#grad1)"/>
</svg>

Hemos puesto otro ejemplo, un poco más complicado que nos da como resultado el dibujo de la derecha. Aquí vemos la diferencia entre el atributo spreadMethod="reflect" que hemos aplicado al borde (stroke), y spreadMethod="repeat", aplicado al relleno (fill).

Tal como vemos aquí el degradado de color puede aplicarse también a los bordes o trazos (stroke), de la misma manera que al relleno.

Nota: (Agosto de 2014) Los navegadores Firefox y Safari no admiten el valor "reflect". Safari Tampoco admite el valor "repeat". Si estás usando alguno de estos navegadores, abre esta página en otro navegador para ver los efectos en el dibujo de la derecha.

También puede usarse un gradiente que hayamos definido anteriormente en otro contenedor SVG, siempre que éste esté en la misma página.

El código del ejemplo de la derecha es el siguiente:

<svg width=270 height=270>
<defs>
<linearGradient id="reflejo"
     x1="40%" y1="40%" x2="50%" y2="50%"
     spreadMethod="reflect">
     <stop offset="0" stop-color="green"/> 
     <stop offset="1" stop-color="lime"/> 
</linearGradient>

<linearGradient id="repite"
     x1="40%" y1="50%" x2="50%" y2="40%"
     spreadMethod="repeat">
     <stop offset="0" stop-color="yellow"/> 
     <stop offset="1" stop-color="red"/> 
</linearGradient>
</defs>
<rect x=10 y=10 width=250 height=125 
    fill="url(#reflejo)" />
<rect x=10 y=140 width=250 height=125 
    fill="url(#repite)" />
</svg>


Gradiente radial

En el Gradiente radial el efecto de cambio de color se produce mediante círculos concéntricos. El cambio de color va desde un punto central hacia el exterior formando círculos.

Utilizamos para ello la etiqueta radialGradient

La utilización de esta etiqueta es parecida a la etiqueta linearGradient.

Debemos poner el atributo id para dar un nombre que identifique al degradado.

Una serie de atributos definen la posición del degradado y sus puntos principales. Estos son:

El resto de atributos son los mismos que para linearGradient y con los mismos valores, es decir gradientUnits y spreadMethod.

Al igual que con linearGradient definimos aquí también los colores y transparencias con las etiquetas <stop offset ...> que se emplean exactamente igual. En el atributo offset el número 0 será el punto del foco y el número 1 será el exterior del radio.

La inclusión del degradado en un elemento se hace de igual manera a lo visto anteriormente, es decir mediante fill="url(#nombre_id)" para incluirlo en el relleno, o stroke="url(#nombre_id)"

para incluirlo en el borde o trazo.

La figura que hemos puesto aquí a la derecha es un círculo con un degradado radial. su código es el siguiente.

<svg width=270 height=270 >
<defs>
<radialGradient id="rad1"
   cx="50%" cy="50%" r="75%" fx="40%" fy="20%">
   <stop offset="0" stop-color="aqua"/>
   <stop offset="1" stop-color="navy"/>
</radialGradient>
</defs>
<circle cx=135 cy=135 r=120 fill="url(#rad1)"/>
</svg>





En la siguiente página veremos la forma de incluir nuevos elementos en la página

Incluir elementos



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com