Mediante la etiqueta <rect> de SVG podemos crear cuadrados y rectángulos en posiciones específicas y con tamaños determinados. Veamos cuales son sus características.
El elemento <rect>
La etiqueta <rect> tiene los siguientes atributos para definir sus características:
| Atributo | Valor por defecto | Descripción | Más info |
|---|---|---|---|
x | 0 | Posición en el eje de coordenadas X. | |
y | 0 | Posición en el eje de coordenadas Y. | |
width | auto | Tamaño de ancho del rectángulo. | |
height | auto | Tamaño de alto del rectángulo. | |
rx | auto | Radio de las esquinas (redondeo) del eje X (horizontal). | |
ry | auto | Radio de las esquinas (redondeo) del eje Y (vertical). | |
pathLength | none | Tamaño total del perímetro del rectángulo. | - |
Comencemos creando un lienzo SVG para crear dentro nuestras formas básicas basadas en rectángulos. En el siguiente ejemplo, creamos un SVG con un tamaño de 275x275 píxels.
La región visible del lienzo se establece en una posición (0,0) y termina en (100,100). Además, le añadimos un atributo style para añadirle un color de fondo gris con CSS:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
</svg>
Ya estamos preparados para empezar a dibujar los rectángulos y cuadrados.
Cuadrados
Ahora, en su interior, vamos a añadir un pequeño cuadrado de 50x50 en la posición inicial del lienzo, es decir, en las coordenadas (0,0). Observa que como el lienzo es de 0...100, podemos establecer su proporción con estos valores, y luego con el width y height del <svg> cambiamos su tamaño:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<rect x="0" y="0" width="50" height="50" fill="indigo" />
</svg>
Observa que para poder verlo bien, hemos añadido un atributo que explicaremos más adelante:
fill, con el valorindigo. Este atributo de estilo pintará el cuadrado de color violeta.
Ahora, vamos a extender el ejemplo anterior, y vamos a crear 4 cuadrados del mismo tamaño en cada esquina del lienzo:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<rect x="0" y="0" width="50" height="50" fill="indigo" />
<rect x="50" y="0" width="50" height="50" fill="purple" />
<rect x="0" y="50" width="50" height="50" fill="deeppink" />
<rect x="50" y="50" width="50" height="50" fill="hotpink" />
</svg>
Remarcar nuevamente que los valores de x e y son las unidades correspondiente al viewBox del <svg> padre, por lo que el primer cuadrado se coloca en la esquina superior izquierda, el segundo en la esquina superior derecha, el tercero en la esquina inferior izquierda y el cuarto y último en la esquina inferior derecha.
Rectángulos
Para crear un rectángulo, lo único que tenemos que hacer es tener un ancho diferente del alto. Observa el siguiente ejemplo, donde el width es más grande que el height, por lo que tenemos un rectángulo horizontal de 100x50:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<rect x="0" y="0" width="100" height="50" fill="indigo" />
</svg>
Bordes redondeados
Observa ahora el siguiente ejemplo, donde añadimos los atributos rx y ry. Estos atributos sirven para definir el radio horizontal de cada esquina del rectángulo (atributo rx) y el radio vertical de cada esquina del rectángulo (atributo ry). En este caso hemos colocado el mismo a cada uno:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<rect x="0" y="0" width="75" height="50" rx="10" ry="10" fill="indigo" />
</svg>
Sin embargo, si variamos y ponemos valores diferentes en rx y ry podemos crear esquinas con redondeos irregulares. Por ejemplo, prueba a modificar estos valores: rx="20" y ry="5".
