SVG <rect>

Formas SVG

SVG possui alguns elementos de forma pré-definidos disponíveis para desenvolvedores:

• Retângulo <rect>
• Círculo <circle>
• Elipse <ellipse>
• Linha reta <line>
• Linhas retas <polyline>
• Polígono <polygon>
• Caminho <path>

Os próximos capítulos começarão com o elemento rect para explicar cada um dos elementos.

Retângulo SVG - <rect>

Exemplo 1

<rect> O elemento é usado para criar retângulos e variantes de formas retangulares:

Este é o 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>

Experimente você mesmo

Explicação do Código:

• Os atributos width e height do elemento <rect> definem a altura e largura do retângulo
• A propriedade style é usada para definir as propriedades CSS do retângulo
• A propriedade fill do CSS define a cor de preenchimento do retângulo
• A propriedade border-width do CSS define a largura da borda do retângulo
• A propriedade stroke do CSS define a cor da borda do retângulo

Exemplo 2

Vamos ver outro exemplo que contém novas propriedades:

Este é o 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>

Experimente você mesmo

Explicação do Código:

• A propriedade x define a posição esquerda do retângulo (por exemplo, x="50" coloca o retângulo na posição 50 px da margem esquerda externa)
• A propriedade y define a posição superior do retângulo (por exemplo, y="20" coloca o retângulo na posição 20 px da margem superior externa)
• A propriedade fill-opacity do CSS define a opacidade da cor de preenchimento (intervalo válido: 0 a 1)
• A propriedade border-opacity do CSS define a opacidade da cor da contorno (intervalo válido: 0 a 1)

Exemplo 3

Define a opacidade do elemento inteiro:

Este é o 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>

Experimente você mesmo

Explicação do Código:

• A propriedade opacity do CSS define o valor de opacidade do elemento inteiro (intervalo válido: 0 a 1)

Exemplo 4

Último exemplo, cria um retângulo com cantos arredondados:

Este é o 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>

Experimente você mesmo

Explicação do Código:

• Os atributos rx e ry tornam os cantos do retângulo arredondados