W3docs
pt
Entrar

Retângulo SVG

Nesta página, você encontra informações sobre o elemento SVG <rect>, aprende a criar retângulos e vê exemplos com CSS.

O elemento SVG <rect> desenha um retângulo. É uma das formas básicas do SVG (ao lado de <circle>, <ellipse>, <line> e <polygon>) e é colocado diretamente dentro de um elemento <svg>. Esta página explica como posicionar e dimensionar um retângulo, como arredondar seus cantos e como controlar o preenchimento e o contorno usando atributos de apresentação ou CSS.

Se SVG é novidade para você, comece com a introdução ao SVG. Para uma lista completa de atributos e elementos, consulte a referência SVG.

Descrição do elemento <rect>

O elemento SVG <rect> cria um retângulo, bem como variações de formas retangulares. É possível desenhar retângulos de diversas alturas e larguras, com diferentes cores de contorno e preenchimento, etc. Vamos experimentar alguns exemplos.

O sistema de coordenadas SVG

Um retângulo é posicionado com os atributos x e y, medidos a partir do canto superior esquerdo do canvas SVG. O eixo x cresce para a direita e o eixo y cresce para baixo (portanto, um valor maior de y move a forma para mais abaixo na tela). Essas coordenadas são expressas em unidades de usuário, que por padrão correspondem a pixels, mas podem ser remapeadas com o atributo viewBox. Os atributos principais de <rect> são:

  • x — a posição horizontal da borda esquerda do retângulo. Padrão: 0 se omitido.
  • y — a posição vertical da borda superior do retângulo. Padrão: 0 se omitido.
  • width — a largura do retângulo. Padrão: 0, o que torna o retângulo invisível, portanto você quase sempre precisa defini-la.
  • height — a altura do retângulo. Também tem padrão 0 (invisível).
  • rx — o raio horizontal usado para arredondar os cantos (opcional).
  • ry — o raio vertical usado para arredondar os cantos (opcional).

Exemplo do 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>
Experimente Você Mesmo »

Agora vamos explicar este código:

  • Os atributos width e height especificam a largura e a altura do retângulo.
  • O atributo style especifica algumas propriedades CSS para o retângulo.
  • A propriedade CSS fill especifica a cor de preenchimento do retângulo.
  • A propriedade CSS stroke-width é usada para especificar a largura da borda do retângulo.
  • A propriedade CSS stroke especifica a cor da borda do retângulo.

Atributos de apresentação vs. CSS

Os estilos fill, stroke e stroke-width acima também podem ser escritos como atributos de apresentação diretamente no elemento, em vez de dentro de um atributo style. Os dois trechos abaixo são 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" />

Os atributos de apresentação são convenientes e legíveis, mas têm a menor prioridade: qualquer regra CSS correspondente (em uma folha de estilos ou em um atributo style) os sobrescreve. Use atributos de apresentação para formas simples e estáticas, e CSS quando quiser reutilizar estilos ou alterá-los ao passar o mouse. Para saber mais sobre bordas, consulte SVG stroking.

Exemplo do elemento SVG <rect> com os 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>
Experimente Você Mesmo »

Vamos explicar o código acima:

  • O atributo x especifica a posição da borda esquerda do retângulo.
  • O atributo y especifica a posição da borda superior do retângulo.
  • Por padrão, se x e y forem omitidos, eles são definidos como 0.
  • A propriedade CSS fill-opacity especifica a opacidade da cor de preenchimento.
  • A propriedade CSS stroke-opacity especifica a opacidade da cor do contorno.

Exemplo do elemento SVG <rect> com a propriedade 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>
Experimente Você Mesmo »

Vamos explicar o código acima:

  • A propriedade CSS opacity define a transparência do retângulo inteiro — tanto o preenchimento quanto o contorno juntos — onde 1 é completamente opaco e 0 é completamente transparente.
  • Isso difere do exemplo anterior: fill-opacity e stroke-opacity tornam o preenchimento e a borda transparentes de forma independente, enquanto opacity se aplica ao elemento como uma unidade única (portanto, um contorno e preenchimento sobrepostos se mesclam com o que estiver atrás da forma, e não entre si).

Exemplo do elemento SVG <rect> com os atributos rx e 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>
Experimente Você Mesmo »

Vamos explicar o código acima:

  • O atributo rx especifica o raio horizontal dos cantos arredondados do retângulo.
  • O atributo ry especifica o raio vertical dos cantos arredondados do retângulo.

A regra de cópia de rx/ry (atenção): se você definir apenas um desses atributos, o navegador usa o mesmo valor para o outro. Portanto, rx="30" sem ry produz cantos arredondados por 30 nas duas direções — exatamente como se você tivesse escrito rx="30" ry="30". Para obter cantos genuinamente elípticos (assimétricos), você deve fornecer valores diferentes para rx e ry. Se nenhum for definido, os cantos permanecem retos. Cada raio também é limitado a no máximo metade da largura (rx) ou da altura (ry) do retângulo.

Capítulos SVG relacionados

  • Introdução ao SVG — o elemento <svg>, o sistema de coordenadas e viewBox.
  • SVG stroking — controle bordas com stroke, stroke-width e traços.
  • SVG polygon — desenhe formas com múltiplos lados a partir de uma lista de pontos.
  • Referência SVG — todos os elementos e atributos SVG em um único lugar.

Prática

Prática
Se um retângulo SVG tem rx='40' mas nenhum atributo ry definido, como seus cantos são arredondados?
Se um retângulo SVG tem rx='40' mas nenhum atributo ry definido, como seus cantos são arredondados?
Was this page helpful?