SVG rectângulo

SVG Shapes

SVG tem alguns elementos de forma pré-definidos, pode ser usado por desenvolvedores para usar e operar:

• Retângulo <rect>
• Rodada <círculo>
• Oval <elipse>
• Linha <line>
• Polyline <polyline>
• Polígono <polígono>
• Caminho <caminho>

As seções a seguir irá explicar-lhe estes elementos, a partir de um elemento rectangular.

SVG retângulo - <rect>

exemplo 1

tag <Rect> é usado para criar um retângulo, e uma variante retangular:

Aqui está o código SVG:

Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).

análise de código:

• largura e altura atributos elementos rect definir a altura ea largura do retângulo
• propriedade de estilo é usado para definir propriedades CSS
• propriedade CSS preenchimento define o retângulo de cor de preenchimento (valores RGB, nome da cor ou o valor hexadecimal)
• Largura da propriedade stroke-width CSS define a fronteira rectangular
• A propriedade cor do traço CSS define a fronteira rectangular

exemplo 2

Vejamos outro exemplo, ele contém uma série de novas propriedades:

Aqui está o código SVG:

Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).

análise de código:

• atributo X define a posição esquerda do retângulo (por exemplo, x = "0" para definir o retângulo para o lado esquerdo da janela do navegador, a distância é 0px)
• Top atributo posição y define o retângulo (por exemplo, y = "0" a partir da definição do retângulo para o topo da janela do navegador é 0px)
• propriedade fill-opacidade do CSS define a transparência da cor de preenchimento (intervalo legal: 0--1)
• A propriedade CSS stroke-opacidade define a transparência da cor do traço (intervalo legal: 0--1)

exemplo 3

Definir a opacidade de todo o elemento:

Aqui está o código SVG:

Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).

• propriedade CSS opacidade define o valor do elemento transparente (gama: 0-1).

exemplo 4

O último exemplo, crie um retângulo arredondado:

Aqui está o código SVG:

Para os usuários do Opera: arquivo SVG vista (clique direito do mouse sobre o gráfico de origem pré-visualização SVG).

• Rx e Ry atributos pode gerar retângulo arredondado.