SVG <rect>

Formas SVG

SVG tiene algunos elementos de forma predefinidos disponibles para los desarrolladores:

• Rectángulo <rect>
• Círculo <circle>
• Elipse <ellipse>
• Línea recta <line>
• Línea de segmentos <polyline>
• Polígono <polygon>
• Ruta <path>

Los siguientes capítulos comenzarán con el elemento rect para explicar cada uno.

Rectángulo SVG - <rect>

Ejemplo 1

<rect> El elemento se utiliza para crear rectángulos y variantes de formas rectangulares:

Este es el código SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Prueba personalmente

Explicación del código:

• Las propiedades width y height del elemento <rect> definen la altura y anchura del rectángulo
• La propiedad style se utiliza para definir las propiedades CSS del rectángulo
• La propiedad de llenado de CSS define el color de relleno del rectángulo
• La propiedad de ancho del borde de CSS define el ancho del borde del rectángulo
• La propiedad de borde de CSS define el color del borde del rectángulo

Ejemplo 2

Veamos otro ejemplo que contiene nuevas propiedades:

Este es el código SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Prueba personalmente

Explicación del código:

• La propiedad x define la posición izquierda del rectángulo (por ejemplo, x="50" colocará el rectángulo en una posición 50 px de la márgen izquierda externa)
• La propiedad y define la posición superior del rectángulo (por ejemplo, y="20" colocará el rectángulo en una posición 20 px de la márgen superior externa)
• La propiedad de opacidad de llenado de CSS define la opacidad del color de relleno (rango válido: 0 a 1)
• La propiedad de opacidad del borde de CSS define la opacidad del color del trazo (rango válido: 0 a 1)

Ejemplo 3

Define la opacidad del elemento completo:

Este es el código SVG:

<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" />
</svg>

Prueba personalmente

Explicación del código:

• La propiedad de opacidad de CSS define el valor de opacidad del elemento completo (rango válido: 0 a 1)

Ejemplo 4

El último ejemplo, crear un rectángulo con esquinas redondas:

Este es el código SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Prueba personalmente

Explicación del código:

• Las propiedades rx y ry hacen que las esquinas del rectángulo sean redondas