Tutoriais SVG do Maujor

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

Conteúdo alternativo para a imagem SVG



Esta página foi criada em: 2011/08/21
Última modificação: 2017/04/4 21:16:48 GMT

Navegação

Links relacionados

Visitantes: Hoje: 8 Total: 29.119