Borde con gradiente lineal Febrero 7, 2008
Publicado por lineadecodigo en : SVG , Hasta ahora 1 comentarioLo más normal es utilizar un gradiente como relleno de una figura. Eso no quiere decir que no podamos utilizar el gradiente sobre un borde.
Para poder realizar esta operación lo primero que tenemos que hacer es definir nuestro gradiente. La forma de hacer esto es la misma indistintamente de donde vayamos a utilizar este. A si que tendremos una definición de gradiente como la que sigue:
Gradiente linear angular en SVG Febrero 5, 2008
Publicado por lineadecodigo en : SVG , Añadir un comenarioDos buenos ejemplos para empezar aprendiendo de gradientes en SVG son Circulo con Gradiente Lineal y Gradiente Lineal Vertical. Los cuales explican como hacer gradientes lineales horizontales y verticales respectivamente. A si que lo que nos queda por explicar es como hacer un gradiente lineal angular en SVG
Gradiente lineal vertical Enero 28, 2008
Publicado por lineadecodigo en : SVG , Añadir un comenario
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
Circulo con gradiente lineal Enero 17, 2008
Publicado por lineadecodigo en : SVG , Hasta ahora 1 comentarioUn gradiente lineal es una variación de color entre dos puntos de forma linear. Aunque, estoy seguro que la palabra gradiente tendrá múltiples interpretaciones dependiendo del área donde lo apliquemos, aquí vamos a ver como lo trata el lenguaje SVG.
Pongámonos manos a la obra. El ejemplo intenta mostrar como hacer un gradiente linear que pase del rojo al naranja dentro de un circulo.
Lo primero de todo y la clave de nuestro ejemplo será definir el gradiente que vamos a utilizar. Ya que posteriormente, dicho gradiente, lo aplicaremos sobre el circulo.
Transparencia y Opacidad en SVG Enero 15, 2008
Publicado por lineadecodigo en : SVG , Añadir un comenarioEl 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.
Dibujando un polígono: triángulo Enero 13, 2008
Publicado por lineadecodigo en : SVG , Añadir un comenarioEn este ejemplo vamos a ver los pasos necesarios para poder pintar un Triángulo en SVG utilizando el elemento POLYGON. Para ello lo único que necesitamos conocer los vértices de nuestro polígono.
El polígono elegido es un Triángulo. Como su nombre bien dice, tendremos tres lados y consecuentemente tres vértices que tendremos que indicar al elemento POLYGON para que este se pueda pintar.
Los vértices de nuestro polígono son indicados mediante el atributo points. Para ello bastará dar las coordenadas de los puntos. Estas separadas entre comas y a su vez, cada coordenada, separada por un espacio.
Dibujar una elipse en SVG Enero 11, 2008
Publicado por lineadecodigo en : SVG , Añadir un comenarioSi queremos dibujar una elipse en SVG deberemos de utilizar la etiqueta <ELLIPSE/>. En este caso lo que vamos a hacer es dibujar una elipse de 50x100 de color rojo.
La forma de configurarla es muy sencilla. En primer lugar lo que hay que hacer es posicionarla en el eje de coordenadas mediante los atributos cx y cy.
Dibujar una línea en SVG Diciembre 30, 2007
Publicado por lineadecodigo en : SVG , Añadir un comenarioEste es uno de los ejemplos más sencillos de SVG. Consiste en dibujar una línea dentro de un lienzo. Es para ello que explicaremos cómo poner una línea de color rojo que vaya de las coordenadas (10,10) a las (100,100).
Círculos con borde en SVG Diciembre 28, 2007
Publicado por lineadecodigo en : SVG , Añadir un comenarioLo primero que tendremos que hacer será dibujar un circulo. Para ello utilizamos la etiqueta <CIRCLE/>. Es bastante interesante que le eches un vistazo al ejemplo Dibujar un círculo en SVG para poder acometer la tarea.
Dibujar un círculo en SVG Diciembre 26, 2007
Publicado por lineadecodigo en : SVG , 2 comentariosPara completar esta sencilla tarea nos valdremos de la etiqueta SVG <CIRCLE/>. Vamos, que para pintar un circulo en SVG no nos tenemos que comer mucho la cabeza.
Y aprendernos una propiedad que es el atributo r. El cual viene a indicarnos el radio que va a tener el circulo.