Desenhar Retângulo com SVG <rect>

O elemento rect é uma forma básica do SVG, usada para criar retângulos com base em uma posição de canto e suas largura e altura. Ele também pode ser usado para criar retângulos arredondados.

O elemento <rect> do SVG representa um retângulo. Usando esse elemento, você pode desenhar retângulos com várias larguras, alturas, diferentes traços (contornos) e cores de preenchimento, cantos arredondados ou quadrados, etc.

Exemplo online

Um exemplo de uso de rect:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

A posição do retângulo é determinada pelos atributos x e y. Lembre-se de que esta posição é em relação a qualquer elemento (pai) fechado.
O tamanho do retângulo é determinado pelos atributos width e height.
A propriedade style permite que você defina outras informações de estilo, como cor de traço e preenchimento, largura do traço, etc. Isso será detalhado em outros textos.
Este é o imagem do retângulo gerado:

Retângulo arredondado

é possível desenhar cantos arredondados no retângulo. Os atributos rx e ry determinam o canto arredondado. O atributo rx determina a largura do arredondamento, enquanto o atributo ry determina a altura do arredondamento. Aqui estão três retângulos com rx e ry configurados5,10e15Atenção para os diferentes tamanhos arredondados.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

O efeito do retângulo arredondado gerado é o seguinte:

Nesses exemplos, rx e ry em cada retângulo são configurados com valores idênticos. Se apenas o atributo rx for configurado, o atributo ry obterá o mesmo valor de rx. Esta é uma maneira rápida de definir cantos arredondados uniformes.
Estes são dois que configuram o atributo rx10mas o atributo ry é configurado separadamente como5e15exemplo. Isso lhe mostrará como o retângulo arredondado se comporta em diferentes alturas e larguras.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

Borda de retângulo

Você pode usar a propriedade de estilo SVG stroke para definir o estilo da borda (contorno) do retângulo. Neste exemplo, a cor da borda é configurada como verde escuro e a largura da borda é3:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

A aparência do elemento quando o rect é exibido no navegador é a seguinte:

Você também pode usar a propriedade style stroke-dasharray faz a borda do retângulo se tornar tracejada. Aqui está um exemplo:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

O efeito de execução do código acima é o seguinte::

Preenchimento de retângulo

Você pode usar a propriedade de estilo SVG fill para preencher o retângulo. Por exemplo, você pode optar por não preencher o elemento usando a propriedade fill do estilo de SVG, configurando-a como none.

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

Aqui está a aparência do elemento rect no navegador sem preenchimento:

Você também pode escolher preencher o retângulo com cor. Este exemplo rect preenche o elemento com verde brilhante:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

Aqui está o efeito de preenchimento do rect no navegador:

Você também pode usar a propriedade style para fill-A opacidade faz a preenchimento transparente. Este exemplo mostra dois retângulos, um retângulo parte no topo do outro retângulo, e o retângulo superior é semi-transparente:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

Este é o efeito semi-transparente do elemento rect ao ser exibido no navegador:

Neste exemplo, o traço do segundo retângulo não é transparente, mas você pode usar a propriedade style do atributo stroke-A propriedade de opacidade torna-o transparente.