SVG <Rect>

SVG Shapes

SVG tem alguns elementos de forma pré-definidos que podem ser usados ​​pelos desenvolvedores:

• Retângulo <rect>
• Círculo <circle>
• Ellipse <ellipse>
• Linha <line>
• Polyline <polyline>
• Polígono <polygon>
• Path <path>

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

SVG Retângulo - <rect>

exemplo 1

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

Aqui está o código SVG:

Code explanation:

• A largura ea altura atributos do <rect> elemento definir a altura ea largura do retângulo
• O style atributo é usado para definir propriedades CSS para o retângulo
• A propriedade CSS preenchimento define a cor de preenchimento do retângulo
• A propriedade CSS stroke-width define a largura da borda do retângulo
• A propriedade CSS acidente vascular cerebral define a cor da borda do retângulo

exemplo 2

Vejamos outro exemplo que contém alguns novos atributos:

Aqui está o código SVG:

Code explanation:

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

exemplo 3

Defina a opacidade para todo o elemento:

Aqui está o código SVG:

Code explanation:

• A propriedade CSS opacidade define o valor de opacidade para todo o elemento (legal range: 0 to 1)

exemplo 4

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

Aqui está o código SVG:

Code explanation:

• O rx e ry atributos arredonda os cantos do rectângulo