IR PARA MENU

Formas básicas da SVG - Polilinha

Objetivo: Nessa matéria mostraremos a construção de polilinhas, 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 as polilinhas.

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

Polilinha

O atributo XML para o elemento <polyline> destinados à criação de polilinhas é o atributo points.
O valor deste atributo é uma lista de coordenadas separadas por espaço em branco. A polilinha é uma sequência de segmentos de reta unindo os pontos definidos pelas coordenadas.

Observe o código a seguir destinado a criar uma polilinha passando pelos pontos de coordenadas (20,20) - (50,130) - (50,20) - (140,140) - (230,80).

		<?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>Polilinha criada pelo Maujor para uso no site SVG</desc>
		<title>Formas básicas - Polilinha</title>
			<polyline fill="none" stroke-width="5" stroke="#808000" 
				points="20,20 50,130 50,20 140,140 230,80" />
		</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