SVG <rect>

formas SVG

SVG tiene algunos elementos de forma predefinidos que los desarrolladores pueden usar:

• Rectángulo <rect>
• Círculo <círculo>
• Elipse <elipse>
• Línea <línea>
• Polilínea <polilínea>
• Polígono <polígono>
• Ruta <ruta>

Los siguientes capítulos explicarán cada elemento, comenzando con el elemento rect.

SVG Rectángulo - <rect>

Ejemplo 1

El elemento <rect> se usa para crear un rectángulo y variaciones de una forma de rectángulo:

Aquí está el código SVG:

Explicación del código:

• Los atributos de ancho y alto del elemento <rect> definen el alto y el ancho del rectángulo
• El atributo de estilo se utiliza para definir las propiedades CSS del rectángulo.
• La propiedad de relleno CSS define el color de relleno del rectángulo.
• La propiedad de ancho de trazo de CSS define el ancho del borde del rectángulo
• La propiedad de trazo CSS define el color del borde del rectángulo.

Ejemplo 2

Veamos otro ejemplo que contiene algunos atributos nuevos:

Aquí está el código SVG:

Explicación del código:

• El atributo x define la posición izquierda del rectángulo (por ejemplo, x="50" coloca el rectángulo a 50 px del margen izquierdo)
• El atributo y define la posición superior del rectángulo (por ejemplo, y="20" coloca el rectángulo a 20 px del margen superior)
• La propiedad de opacidad de relleno de CSS define la opacidad del color de relleno (rango legal: 0 a 1)
• La propiedad stroke-opacity de CSS define la opacidad del color del trazo (rango legal: 0 a 1)

Ejemplo 3

Defina la opacidad para todo el elemento:

Aquí está el código SVG:

Explicación del código:

• La propiedad de opacidad de CSS define el valor de opacidad para todo el elemento (rango legal: 0 a 1)

Ejemplo 4

Último ejemplo, cree un rectángulo con esquinas redondeadas:

Aquí está el código SVG:

Explicación del código:

• Los atributos rx y ry redondean las esquinas del rectángulo.