jump to navigation

Dibujar un rectángulo con SVG Marzo 2, 2009

Publicado por lineadecodigo en : SVG , trackback

Dibujar un rectángulo con SVG es una cosa bastante fácil ya que el rectangulo es una de las figuras estándar del lenguaje SVG. Para ello necesitaremos utilizar la etiqueta RECT

Los dos primeros atributos importantes para nuestro ejemplo son la altura y ancho del rectangulo. Para ello utilizaremos los atributos de la etiqueta RECT: width y height.

  1. <rect width="200" height="100" fill="red"/>

Otra cosa que podemos hacer es la de posicionar el rectangulo dentro del lienzo. Para ello tendremos que definir las coordenadas X,Y del lienzo. El nombre de los atributos es el mismo: X e Y.

  1. <rect x="50" y="50" width="200" height="100""/>

Por último vamos a darle color a la cosa. En este caso, utilizaremos el atributo fill, indicándole el color que queremos usar (rojo en este caso):

  1. <rect fill="red">

Aunque podríamos darle el color mediante un estilo y el atributo style:

  1. <rect style="fill:red;"/>

El código que nos quedaría al final sería algo parecido a lo siguiente:

  1. <rect x="50" y="50" width="200" height="100" fill="red"/>

Articulos Similares:

|- Descargar el código
|- Reportar error en el código
|- Foro sobre SVG

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 1691 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , ,

Comentarios»

1. Acerca de SVG - Marzo 24, 2009

[...] Vía: Línea de Código [...]




Si tienes dudas sobre SVG no dudes en visitar el Foro sobre SVG.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen