W3docs
es
Iniciar sesión

Rectángulo SVG

En esta página encontrarás información útil sobre el elemento de forma SVG <rect>, aprende a crear un rectángulo con él y ve diferentes ejemplos con CSS.

El elemento SVG <rect> dibuja un rectángulo. Es una de las formas SVG básicas (junto con <circle>, <ellipse>, <line> y <polygon>) y se coloca directamente dentro de un elemento <svg>. Esta página explica cómo posicionar y dimensionar un rectángulo, cómo redondear sus esquinas y cómo controlar su relleno y trazo usando atributos de presentación o CSS.

Si SVG es nuevo para ti, comienza con la introducción a SVG. Para una lista completa de atributos y elementos, consulta la referencia de SVG.

Descripción del elemento <rect>

El elemento SVG <rect> crea un rectángulo, así como variaciones de formas rectangulares. Es posible dibujar rectángulos de distintas alturas y anchos, con diferentes colores de trazo y relleno, etc. Vamos a probar algunos ejemplos.

El sistema de coordenadas SVG

Un rectángulo se posiciona con los atributos x e y, que se miden desde la esquina superior izquierda del lienzo SVG. El eje x crece hacia la derecha y el eje y crece hacia abajo (por lo que un valor mayor de y mueve la forma más hacia abajo en la pantalla). Estas coordenadas se expresan en unidades de usuario, que por defecto corresponden a píxeles, pero pueden reasignarse con el atributo viewBox. Los atributos principales de <rect> son:

  • x — la posición horizontal del borde izquierdo del rectángulo. Por defecto es 0 si se omite.
  • y — la posición vertical del borde superior del rectángulo. Por defecto es 0 si se omite.
  • width — el ancho del rectángulo. Por defecto es 0, lo que hace el rectángulo invisible, por lo que casi siempre es necesario definirlo.
  • height — la altura del rectángulo. También tiene valor por defecto 0 (invisible).
  • rx — el radio horizontal utilizado para redondear las esquinas (opcional).
  • ry — el radio vertical utilizado para redondear las esquinas (opcional).

Ejemplo del elemento SVG <rect>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Ahora expliquemos este código:

  • Los atributos width y height especifican el ancho y la altura del rectángulo.
  • El atributo style especifica algunas propiedades CSS para el rectángulo.
  • La propiedad CSS fill especifica el color de relleno del rectángulo.
  • La propiedad CSS stroke-width se usa para especificar el ancho del borde del rectángulo.
  • La propiedad CSS stroke especifica el color del borde del rectángulo.

Atributos de presentación vs. CSS

Los estilos fill, stroke y stroke-width anteriores también pueden escribirse como atributos de presentación directamente en el elemento, en lugar de dentro de un atributo style. Los dos fragmentos de código a continuación son equivalentes:

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Los atributos de presentación son convenientes y legibles, pero tienen la prioridad más baja: cualquier regla CSS coincidente (en una hoja de estilos o en un atributo style) los anula. Usa atributos de presentación para formas simples y estáticas, y CSS cuando quieras reutilizar estilos o cambiarlos al pasar el cursor. Para obtener más información sobre los bordes, consulta SVG stroking.

Ejemplo del elemento SVG <rect> con los atributos x e y:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Expliquemos el código anterior:

  • El atributo x especifica la posición izquierda del rectángulo.
  • El atributo y especifica la posición superior del rectángulo.
  • Por defecto, si x e y se omiten, se establecen en 0.
  • La propiedad CSS fill-opacity especifica la opacidad del color de relleno.
  • La propiedad CSS stroke-opacity especifica la opacidad del color de trazo.

Ejemplo del elemento SVG <rect> con la propiedad CSS opacity:

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Expliquemos el código anterior:

  • La propiedad CSS opacity establece la transparencia del rectángulo completo — tanto el relleno como el trazo juntos — donde 1 es completamente opaco y 0 es completamente transparente.
  • Esto difiere del ejemplo anterior: fill-opacity y stroke-opacity hacen transparentes el relleno y el borde de forma independiente, mientras que opacity se aplica al elemento como una unidad única (por lo que el trazo y el relleno superpuestos se mezclan con lo que hay detrás de la forma, no entre sí).

Ejemplo del elemento SVG <rect> con los atributos rx y ry:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Expliquemos el código anterior:

  • El atributo rx especifica el radio horizontal de las esquinas redondeadas del rectángulo.
  • El atributo ry especifica el radio vertical de las esquinas redondeadas del rectángulo.

La regla de copia rx/ry (nota importante): si defines solo uno de estos atributos, el navegador utiliza el mismo valor para el otro. Así, rx="30" sin ry produce esquinas redondeadas en 30 en ambas direcciones, exactamente como si hubieras escrito rx="30" ry="30". Para obtener esquinas genuinamente elípticas (asimétricas), debes asignar valores diferentes a rx y ry. Si ninguno de los dos está definido, las esquinas permanecen cuadradas. Cada radio también se limita como máximo a la mitad del ancho del rectángulo (rx) o de la altura (ry).

Capítulos SVG relacionados

  • Introducción a SVG — el elemento <svg>, el sistema de coordenadas y viewBox.
  • SVG stroking — controla los bordes con stroke, stroke-width y guiones.
  • SVG polygon — dibuja formas de múltiples lados a partir de una lista de puntos.
  • Referencia SVG — todos los elementos y atributos SVG en un solo lugar.

Práctica

Práctica
Si un rectángulo SVG tiene rx='40' pero no tiene el atributo ry definido, ¿cómo se redondean sus esquinas?
Si un rectángulo SVG tiene rx='40' pero no tiene el atributo ry definido, ¿cómo se redondean sus esquinas?
Was this page helpful?