Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

rect

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Traducción en curso

El elemento rect es una forma básica de SVG, usada para crear rectángulos basada en la posición de una esquina, su alto y ancho.
También podría ser usada para crear rectángulos con esquinas redondeadas.

Contexto de uso

CategoriasElemento de forma básica, Elemento gráfico, Elemento forma
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos

Ejemplo

Uso simple de rect

Código fuente resultado
<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

» rect-1.svg

rect con esquinas redondeados

Código fuente resultado
<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10"
        width="100" height="100"
        rx="15" ry="15"/>

</svg>

» rect-2.svg

Atributos

Atributos globales

Atributos específicos

Interfaz DOM

Este elemento implementa la interfaz SVGRectElement.

Compatibilidad de los Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) No support (Yes) 3.0.4

The chart is based on these sources.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Sebastianz, jdgarrido
 Última actualización por: Sebastianz,