Rectángulos en svg HTML5

Anterior
Avanzar

Crear un rectángulo con HTML es más sencillo de lo que crees, en esta lección te enseñaré a cómo crear rectángulos en SVG y cómo personalizarlos, además veremos varios ejemplos muy específicos para las propiedades respectivas. Vamos a por ello.

Etiqueta <rect>

Para crear un rectángulo en svg simplemente creamos la etiqueta <rect/> dentro del elemento <svg>, de tal manera que el rectángulo se dibujará dentro del espacio SVG.

<svg width="500" height="400" > 

<rect/>

</svg>

Ancho y alto

Para determinar las dimensiones de ancho y altura del rectángulo, emplearemos las propiedades:

  • width.- ancho del rectángulo (en dirección de eje X)
  • height.- altura del rectángulo (en dirección de eje Y)

Los valores para estas propiedades pueden ser numéricos con su respectiva unidad de medida (px, em, %, etc.)

Ejemplo de rectángulo en SVG

<svg width="500" height="400" > 

<rect width="200" height="100"/>

</svg>

Posición

Posicionar un rectángulo en svg es tan fácil como establecer las coordenadas (X,Y) de la esquina superior izquierda del rectángulo, donde el punto de origen (0,0) será la esquina superior izquierda del lienzo SVG.

Propiedades para posicionar rectángulos:

  • X.- indica la distancia entre el borde izquierdo del lienzo SVG y el borde izquierdo del rectángulo.
  • Y.- indica la distancia entre el borde superior del lienzo SVG y el borde superior del rectángulo.

Ejemplo de posicionamiento SVG

<svg width="500" height="400" > 

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

</svg>

Resultado

Observa la imagen y notarás que el lienzo SVG no se puede distinguir, sin embargo el rectángulo esta dentro de ella, y el color por defecto en este caso es de color negro, más adelante veremos como personalizar, además agregaremos propiedades para poder distinguir al lienzo.

Te recomendamos leer:  Categorías de contenidos HTML5

Ejemplo aclaratorio de posicionamiento SVG

Veamos un ejemplo en que podamos distinguir el lienzo SVG, el rectángulo dentro de ella y la posición que toma al establecer las propiedades X y Y. Para nuestro propósito colocaremos un borde solido de 1px y color negro al lienzo SVG, luego podremos marcar las distancias de posicionamiento, veamos.

<svg style="border: 1px solid black;" width="400" height="200" > 

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

</svg>

Resultado

Color de relleno y borde

Para poner color de borde y relleno a los rectángulos de SVG utilizaremos las propiedades que conocimos en la primera lección de SVG, a continuación recordemos algunos que emplearemos en esta ocasión.

  • stroke.- define el color de borde.
  • stroke-width.- define el ancho de borde.
  • fill.- define el color de fondo.

Ejemplo de borde y relleno en SVG

<svg>
<rect x="50" y="20" width="200" height="100" stroke="blue" stroke-width="4px" fill="yellow"/>
</svg>

Resultado

Rectángulo con bordes redondeados SVG

Mediante código HTML podemos crear también un rectángulo con bordes redondeados, para ello simplemente añadiremos las respectivas propiedades dentro de la etiqueta <rect/>

  • rx.- radio de borde X, define la distancia en X desde donde empieza la curvatura.
  • ry.- radio de borde Y, define la distancia en Y desde donde empieza la curvatura.

Ejemplo 1

<svg> 

<rect x="100" y="50" width="200" height="100"  rx="30" ry="50"  />

</svg>

Resultado

Ahora veamos otro ejemplo donde el borde en X es mayor que el borde en Y:

Ejemplo 2

<svg> 

<rect x="100" y="50" width="200" height="100"  rx="80" ry="40"  />
  
</svg>

Resultado

Si solo definimos un radio, ya sea rx o ry, entonces se tomará en cuenta la misma medida para la otra, de tal manera que el borde resultante sera uniforme, con radios de curvatura iguales.

Te recomendamos leer:  Polilineas en html5
Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5