Dibujar una línea en SVG

30/Dic/2007 SVG , Deja un comentario

Este 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).

Para poderlo llevar a cabo tendremos que utilizar la etiqueta <LINE/>. La cual no tiene mucho misterio ya que sus atributos representas las coordenadas x1,y1 e x2,y2 origen y destino de la línea. Quedándonos el siguiente código:

<LINE x1="10" y1="10" x2="100" y2="100"/>

Una última cosa que haremos será el dotar a la línea de un ancho mayor. En este caso utilizamos el atributo stroke-width y stroke para indicarle su color (el rojo).

<LINE stroke-width="5" stroke="red"/>

Visualizar el ejemplo | Descargar el código

¿Algo que nos quieras comentar?

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

*

*