SVG <correto>

Formas SVG

O SVG possui alguns elementos de forma predefinidos que podem ser usados ​​pelos desenvolvedores:

• Retângulo <rect>
• Círculo <círculo>
• Elipse <elipse>
• Linha <linha>
• Polilinha <polilinha>
• Polígono <polígono>
• Caminho <caminho>

Os capítulos seguintes explicarão cada elemento, começando com o elemento rect.

Retângulo SVG - <rect>

Exemplo 1

O elemento <rect> é usado para criar um retângulo e variações de uma forma retangular:

Segue o código SVG:

Explicação do código:

• Os atributos largura e altura do elemento <rect> definem a altura e a largura do retângulo
• O atributo style é usado para definir propriedades CSS para o retângulo
• A propriedade de preenchimento CSS define a cor de preenchimento do retângulo
• A propriedade CSS stroke-width define a largura da borda do retângulo
• A propriedade de traço CSS define a cor da borda do retângulo

Exemplo 2

Vejamos outro exemplo que contém alguns novos atributos:

Segue o código SVG:

Explicação do código:

• O atributo x define a posição esquerda do retângulo (por exemplo, x="50" coloca o retângulo a 50 px da margem esquerda)
• O atributo y define a posição superior do retângulo (por exemplo, y="20" coloca o retângulo a 20 px da margem superior)
• A propriedade fill-opacity do CSS define a opacidade da cor de preenchimento (intervalo legal: 0 a 1)
• A propriedade de opacidade do traço CSS define a opacidade da cor do traço (intervalo legal: 0 a 1)

Exemplo 3

Defina a opacidade para todo o elemento:

Segue o código SVG:

Explicação do código:

• A propriedade CSS opacity define o valor da opacidade para todo o elemento (intervalo legal: 0 a 1)

Exemplo 4

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

Segue o código SVG:

Explicação do código:

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