Transparencia y Opacidad en SVG

15/Ene/2008 SVG , , , 1 Comentario

El objetivo de este ejemplo es ver cómo podemos definir objetos que sean transparentes en SVG. Para ello crearemos tres círculos y una línea que los atraviese.Dichos círculos irán aumentando su nivel de transparencia. Es decir, el primero será el más opaco y el último circulo será el más transparente.

Lo primero es recordar cómo se define un circulo. Para ello, es recomendable la lectura del ejemplo Dibujar un Circulo en SVG. Pero, básicamente, consiste en utilizar la etiqueta <CIRCLE/> con más o menos atributos.

  1. <CIRCLE cx="100" cy="100" r="50"/>

Para definir la transparencia del circulo utilizaremos el atributo opacity dentro de los estilos. Dicho atributo podrá tomar los valores de 0 a 1. Los decimales los utilizaremos con el separador de punto decimal. Por ejemplo 0.4. El valor de 1 hace que el elemento sea totalmente opaco, mientras que el valor de 0 hace que el elemento sea totalmente transparente.

Nos quedaría un código parecido a este:

  1. <CIRCLE style="opacity:0.5;"/>

Si ponemos 3 circulos, incrementando el valor de la opacidad, y desplazando su centro dentro del lienzos sería:

  1. <circle cx="100" cy="100" r="50" style="fill:green;opacity:0.8"/>
  2. <circle cx="250" cy="100" r="50" style="fill:green;opacity:0.5"/>
  3. <circle cx="400" cy="100" r="50" style="fill:green;opacity:0.2"/>

Lo siguiente será poner una línea atravesando a los círculos. Para ello deberemos de utilizar la etiqueta <LINE/> con sus atributos de coordenadas x1,y1 x2,y2.

  1. <LINE x1="100" y1="100" x2="500" y2="100"/>

Y se me olvidaba otra cosa. El orden del pintado lo establece el orden en el que aparezca el código. A si que si queremos poner la línea debajo de los círculos, habrá que escribirla primero.

Visualizar el ejemplo | Descargar el código

Un comentario en “Transparencia y Opacidad en SVG”

Víctor Cuervo

zacarias

genial! lastima que explorer no lo soporte….siempre me embalo con estas cosas, par a mitad de camino de desarrollo darme cuenta que el fucking iexplorer no lo soporta…muchas gracias igual e el ejemplo es genial

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*