IR PARA MENU

Formas básicas da SVG - Retângulo

Objetivo: Nessa matéria mostraremos a construção de retângulos, uma das seis formas gráficas básicas da linguagem SVG. Formas básicas são também chamadas de objetos primitivos da SVG e são usadas isoladamente para criação de gráficos simples ou em conjunto para desenvolvimento de gráficos avançados.

Introdução

Cada uma das seis formas básicas é criada com um elemento XML específico conforme descrito a seguir.

1. <rect /> elemento destinado a criação de retângulos;
2. <circle /> elemento destinado a criação de círculos e circunferências;
3. <ellipse /> elemento destinado a criação de elipses;
4. <line /> elemento destinado a criação de linhas retas;
5. <polyline /> elemento destinado a criação de polilinhas;
6. <polygon /> elemento destinado a criação de polígonos.

Nessa matéria estudaremos o retângulo.

Renderização crossbrowser

Alerto que estou usando nessa matéria e em todas as páginas deste site a biblioteca JavaScript SVG Web que possibilita a renderização de gráficos SVG de maneira crossbrowser. Para detalhes e código de inserção ler a matéria Plugins e Scripts SVG

Retângulo

Os atributos XML para o elemento <rect> destinados à criação de um retângulo são:

• x define a coordenada horizontal do canto superior esquerdo do retângulo;
• y define a coordenada vertical do canto superior esquerdo do retângulo;
• width define a largura do retângulo;
• height define a altura do retângulo;
• rx define o raio de curvatura segundo o eixo dos x para arredondamento dos cantos do retângulo;
• ry define o raio de curvatura segundo o eixo dos y para arredondamento dos cantos do retângulo;

Observe o código a seguir destinado a criar um retângulo com origem nas coordenadas (10,20) com dimensões de 200px de largura por 100px de altura e cantos arredondados.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

O retângulo foi preenchido com a cor preta.
Preta é a cor padrão de preenchimento de todas as formas criadas com SVG.

Cor de preenchimento

Para estilizar a cor de preenchimento usamos o atributo fill como mostrado a seguir.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="red" />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

O valor do atributo fill é uma cor CSS válida, ou seja, um código hexadecimal com 3 ou 6 dígitos, um código RGB, ou uma palavra-chave.
Ver Módulo para cores das CSS3.

Bordas em canto vivo

Para estilizar as bordas usamos os atributos stroke que define a cor da borda e o atributo stroke-width que define a espessura da borda. Tudo como mostrado a seguir.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="red" stroke="blue" stroke-width="5" />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

Para criar somente o contorno do retângulo, sem preenchimento, declaramos fill="none" (sem preenchimento), como mostrado a seguir.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="none" stroke="blue" stroke-width="5" />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

Bordas arredondadas

Criamos retângulos com bordas arredondadas com uso dos atributos rx e ry. Esses atributos definem, respectivamente, os raios de curvatura horizontal e vertical das bordas. Dessa maneira é possível criar não somente bordas em forma de arco circular como também elípticos.

As diretrizes que regem a renderização das bordas arredondadas são as seguintes.

• Se for definido apenas um atributo de borda (rx ou ry) o valor do atributo que não foi definido será igual ao valor do atributo definido;
• O valor de um dos atributos de borda (rx ou ry) deverá ser no máximo igual ao dobro do outro. Se for definido um dos atributos com valor maior que o dobro do outro o valor será reduzido para o dobro.

O código mostrado a seguir cria um retângulo, sem preenchimento, com bordas arredondadas em arco circular de raio igual a 20px.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="none" stroke="blue" stroke-width="5" rx="20" />
		</svg>
	

Notar que omitimos ry e ele foi considerado igual a rx="20" conforme s diretrizes que regem a renderização das bordas arredondadas, descritas anteriormente.

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

O código mostrado a seguir cria um retângulo, sem preenchimento, com bordas arredondadas em arco elíptico de raios iguais a 40px e 25px.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="150">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="none" stroke="blue" stroke-width="5" rx="40" ry="25px" />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 250px x 150px no elemento svg

Opacidade

As cores de preenchimento e das bordas podem ser definidas com opacidade. Usamos os atributos fill-opacity e stroke-opacity para definir um valor de opacidade para a cor de preenchimento e a cor das bordas respectivamente. O grau de opacidade varia de 1 (cor totalmente opaca ou cor sólida) até 0 (transparência total ou ausência da cor).

Observe o código a seguir que cria dois retângulos parcialmente superpostos com um deles preenchido com uma cor sólida e o outro com transparência no preenchimento e nas bordas conforme mostrado na renderização.

		<?xml version="1.0"?> 
		<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200">
		<desc>Retângulo criado pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Retângulo</title>
			<rect x="20" y="10" width="200" height="100" fill="green" stroke="black" stroke-width="5" rx="20" />
	<rect x="90" y="80" width="150" height="90" fill="rgb(200, 0, 0)" fill-opacity="0.7" stroke="blue" stroke-width="10" stroke-opacity="0.5"  />
		</svg>
	

A renderização do código mostrado é conforme a seguir.
Nota: O contorno na cor laranja delimita a área total de criação definida em 350px x 200px no elemento svg

Posicionamento de bordas

Importante: Notar na figura anterior que a borda do retângulo transparente está dividida em duas cores, dando a impressão que se trata de duas bordas justapostas. Isso ocorre porque por padrão as bordas das formas SVG são posicionadas de modo a que metade de sua espessura se posicione internamente à forma e outra metade externamente. No caso da figura com borda transparente a diferença de cores ficou evidenciada pois a metade interior da borda está sobre a forma e a cor de preenchimento faz com que o efeito da opacidade seja atenuado, escurecendo-a em relação à borda exterior. No exemplo citado, para a borda definida em 10px, os 5px interiores da borda são mais escuros que os 5px exteriores.

Desafio

Quer testar seu conhecimento e rendimento do aprendizado dessa matéria? Solucione o seguinte problema.

Crie um gráfico exatamente igual ao mostrado no item anterior no qual não haja o efeito de borda dupla no retângulo transparente. Atenção: o efeito da borda dupla desaparece mas a borda continua transparente.