Rectángulos en svg HTML5

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:  Declaración de documento 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:  Estructura de una página HTML5
Lecciones de HTML5
5/5 - (3 votos)

Deja un comentario