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 ver:  Elipses SVG en 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 ver:  Etiqueta de vídeo HTML5 - Atributos y propiedades
Lecciones de HTML5
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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML