Rectángulo 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 diversas alturas y anchos, con diferentes colores de trazo y relleno, etc. Probaremos algunos ejemplos.

Ejemplo del elemento SVG `<rect>`:

Ejemplo del elemento SVG <rect>:

html

<!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>

Try it Yourself »

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 utiliza para especificar el ancho del borde del rectángulo.
La propiedad CSS stroke especifica el color del borde del rectángulo.

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

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

html

<!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>

Try it Yourself »

Explicemos 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 del trazo.

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

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

html

<!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>

Try it Yourself »

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

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

html

<!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>

Try it Yourself »

Explicemos 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.

Práctica

¿Qué atributos se pueden especificar para los rectángulos SVG en HTML?

'x' e 'y' para determinar el punto de inicio'width' y 'height' para establecer el tamaño'color' y 'background-color' para definir la apariencia'rx' y 'ry' para redondear las esquinas'src' y 'alt' para referencia de imagen y accesibilidad

Rectángulo SVG ​

Descripción del elemento <rect> ​

Ejemplo del elemento SVG <rect>: ​

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

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

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

Práctica ​

Rectángulo SVG

Descripción del elemento `<rect>`

Ejemplo del elemento SVG `<rect>`:

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

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

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

Práctica