Objetivo: Nessa matéria mostraremos a construção de polígonos, 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.
Cada uma das seis formas básicas é criada com um elemento XML específico conforme descrito a seguir.
<rect />
elemento destinado a criação de retângulos;<circle />
elemento destinado a criação de círculos e circunferências;<ellipse />
elemento destinado a criação de elipses;<line />
elemento destinado a criação de linhas retas;<polyline />
elemento destinado a criação de polilinhas;<polygon />
elemento destinado a criação de polígonos.Nessa matéria estudaremos os polígonos.
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
O atributo XML para o elemento <polygon>
destinados à criação de polígonos é o atributo points
.
O valor deste atributo é uma lista de coordenadas separadas por espaço em branco. O polígono é uma sequência de segmentos de reta unindo os pontos definidos pelas coordenadas, formando uma superfície fechada.
Observe o código a seguir destinado a criar um hexágono (polígono de seis lados) passando pelos pontos de coordenadas (90,15) - (150,15) - (190,75) - (150,135) - (90,135) - (50,75).
<?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>Hexágono criado pelo Maujor para uso no site SVG</desc> <title>Formas básicas - Hexágono</title> <polygon points="90,15 150,15 190,75 150,135 90,135 50,75" /> </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 hexágono foi preenchido com a cor preta.
Preta é a cor padrão de preenchimento de todas as formas criadas com SVG.
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>Hexágono criado pelo Maujor para uso no site SVG</desc> <title>Formas básicas - Hexágono</title> <polygon points="90,15 150,15 190,75 150,135 90,135 50,75" fill="lime" /> </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.
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>Hexágono criado pelo Maujor para uso no site SVG</desc> <title>Formas básicas - Hexágono</title> <polygon points="90,15 150,15 190,75 150,135 90,135 50,75" fill="lime" 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 hexágono, 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>Hexágono criado pelo Maujor para uso no site SVG</desc> <title>Formas básicas - Hexágono</title> <polygon points="90,15 150,15 190,75 150,135 90,135 50,75" 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
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="250" height="150"> <desc>Hexágono criado pelo Maujor para uso no site SVG <title>Formas básicas - Hexágono <polygon points="70,15 130,15 170,75 130,135 70,135 30,75 " fill="green" stroke="black" stroke-width="5" /> <polygon points="130,25 190,25 230,85 190,145 130,145 90,85 " fill="red" stroke="blue" stroke-width="10" fill-opacity="0.7" 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 250px x 150px no elemento svg
Importante: Notar na figura anterior que a borda do hexágono 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.
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 hexágono transparente. Atenção: o efeito da borda dupla desaparece mas a borda continua transparente.
Visitantes: Hoje: 9 Total: 96.420