Dibujar rectángulos con SVG <rect>

El elemento rect es una forma básica de SVG, utilizada para crear rectángulos, basándose en una posición de esquina y sus anchura y altura. También se puede usar para crear rectángulos redondeados.

El elemento <rect> de SVG representa un rectángulo. Al usar este elemento, puede dibujar un rectángulo con diferentes anchuras, alturas, trazos (contornos) y colores de relleno, ángulos afilados o redondeados, etc.

Ejemplo en línea

Un ejemplo de uso de rect

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"y="10"alto="100"　ancho="100"
　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/></svg>

La posición del rectángulo se determina por los atributos x e y. Recuerde, esta posición es con respecto a cualquier elemento cerrado (padre).
El tamaño del rectángulo se determina por los atributos width y height.
Esta propiedad de estilo permite configurar otra información de estilo, como el color del trazo y el relleno, el ancho del trazo, etc. Esto se explicará en más detalles en otros textos.
Este es el rectángulo de imagen generado:

Rectángulo redondeado

se pueden dibujar arcos en el rectángulo. Los atributos rx y ry determinan el arco en las esquinas. El atributo rx determina el ancho del redondeo, mientras que el atributo ry determina la altura. Aquí hay tres rectángulos con rx y ry configurados respectivamente en5,10y15Atención a los diferentes tamaños en el redondeo.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"y="10"alto="50"　ancho="50"
　　　　　　　　　　rx="5"ry="5"
　　　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/>
　　　　<rect　x="70"　y="10"alto="50"　ancho="50"
　　　　　　　　　　rx="10"ry="10"
　　　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/>
　　　　<rect　x="130"　y="10"alto="50"　ancho="50"
　　　　　　　　　　rx="15"ry="15"
　　　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/>
</svg>

El efecto del rectángulo redondeado generado es el siguiente:

En estos ejemplos, rx y ry se configuran con el mismo valor en cada rectángulo. Si solo se configura el atributo rx, el atributo ry obtendrá el mismo valor que rx. Esto es una forma rápida de definir esquinas redondeadas uniformes.
Estos son dos que configuran rx en10pero configura el atributo ry respectivamente en5y15de ejemplo. Esto le mostrará cómo se ve el rectángulo redondeado en diferentes alturas y anchos.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"y="10"alto="50"　ancho="50"
　　　　　　　　　　rx="10"ry="5"
　　　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/>
　　　　<rect　x="130"　y="10"alto="50"　ancho="50"
　　　　　　　　　　rx="10"ry="15"
　　　　　　　　　　style="trazo:#006600;relleno:　#00cc00"/>
</svg>

Borde de rectángulo

Puede usar la propiedad de estilo trazo de SVG para establecer el estilo del borde (contorno) del rectángulo. En este ejemplo, se configura el color del trazo en verde oscuro y se establece el ancho del borde en3:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　ancho="100"　altura="100"
　　　　　　style="trazo:　#009900;
　　　　　　　　　　　　　trazo-ancho:　3;
　　　　　　　　　　　　　relleno:　ninguno;
　　　　　　"
　　　　　　/></svg>

Cuando el rect se muestra en el navegador, el efecto de apariencia del elemento es el siguiente:

También puede usar la propiedad de estilo trazo-dasharray hace que el borde del rectángulo sea discontinuo. El siguiente ejemplo muestra:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　ancho="100"　altura="100"
　　　　　　style="trazo:　#009900;
　　　　　　　　　　　　　trazo-ancho:　3;
　　　　　　　　　　　　　trazo-dasharray:　10　5;
　　　　　　　　　　　　　relleno:　ninguno;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

El efecto de ejecución del código anterior es el siguiente::

Relleno de rectángulo

Puede usar la propiedad de estilo de relleno de SVG para rellenar el rectángulo. Por ejemplo, puede optar por no rellenar el elemento utilizando la propiedad de estilo fill configurada en none.

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　ancho="100"　altura="100"　
　　　　　　　　　　　　style="trazo:　#009900;relleno:　ninguno;"　/></svg>

La apariencia del elemento rect sin relleno en el navegador es la siguiente:

También puede elegir rellenar el rectángulo con un color. En este ejemplo, el rect usa un verde brillante para rellenar el elemento:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　ancho="100"　altura="100"
　　　　　　style="trazo:　#009900;relleno:　#33ff33;"/>
</svg>

A continuación, se muestra el efecto de visualización del rect en el navegador después de rellenarlo:

También puede usar la propiedad style para rellenar-La propiedad opacity hace que el relleno sea transparente. Este ejemplo muestra dos rectángulos, uno que se superpone en parte sobre el otro, y el rectángulo superior es semitransparente:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　ancho="100"　altura="100"
　　　　　　style="trazo:　#009900;
　　　　　　　　　relleno:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　ancho="100"　altura="100"
　　　　　　style="trazo:　#000099;
　　　　　　　　　relleno:　#3333ff;
　　　　　　　　　relleno-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

Este es el aspecto semitransparente del elemento cuando se presenta rect en el navegador:

En este ejemplo, el trazo del segundo rectángulo no es transparente, pero puede usar la propiedad style atributo stroke-La opacidad lo hace transparente.