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 dentro del elemento , 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.)
<svg width="500" height="400" > <rect width="200" height="100"/> </svg>
Ejemplo de rectángulo en 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 width="500" height="400" > <rect x="100" y="50" width="200" height="100" /> </svg>
Veremos:
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.
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>
Veremos:
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
<svg> <rect x="50" y="20" width="200" height="100" stroke="blue" stroke-width="4px" fill="yellow"/> </svg>
Veremos:
Bordes redondeados
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
- 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>
Veremos:
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>
Veremos:
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.