Curva Evolvente de um Círculo e Função Involuta de um Ângulo de Inclinação usando SVG

1. Evolvente
Será desenhado uma evolvente, esta primeira etapa é a mais importante porque o dente de uma engrenagem é evolvental.
O raciocínio é o mesmo da criação de engrenagem com CANVAS é recomendável estudar primeiro este assunto.

Definições
Evolvente de círculo: é a curva descrita por um ponto P de uma reta s que gira sem escorregar sobre uma circunferência chamada circunferência de base de raio rb.

A evolvente pode ser descrita como a curva gerada pela extremidade de um fio esticado (ponto P) que é desenrolado da circunferência de um determinado círculo (apartir do ponto Po), como indicado na figura abaixo. O círculo do qual o fio é desenrolado é conhecido como círculo base. O fio corresponde a reta s que vai girando a medida que é desenrolado.

Circunferência de base: circunferência sobre a qual rola a reta que contém o ponto geratriz, o raio de base rb é o raio dessa circunferência.
ψ: ângulo de incidência ou ângulo de inclinação da evolvente, ângulo entre o vetor radial (r) e a tangente a curva evolvente (t), é o ângulo determinado pelo raio vetor de um ponto P e o raio de base que passa pelo ponto de tangência entre a circunferência de base e a reta geratriz com o mesmo ponto P.
θ: ângulo do raio vetor é a função evolvente de ψ;
θ + ψ : ângulo através do qual a linha é desenrolada, ângulo de giro.
r:
raio vetor é o raio que une o centro da circunferência de base com um ponto genérico P da evolvente, correspondente ao segmento de reta OP. No caso de uma engrenagem de dente reto o raio vetor corresponderá ao raio da circunferência da cabeça do dente.
rc : raio de curvatura da curva evolvente, correspondente ao segmento de reta TP;
rb : raio base, correspondente ao segmento de reta OT;
s: reta geratriz é aquela que contém o ponto P gerador da evolvente, é sempre tangente à circunferência de base, rola sobre a circunferência de base;
t: reta tangente a curva evolvente no ponto P, t ⊥ s.
invψ = tgψ −ψ função involuta do ângulo ψ ou ângulo função da evolvente.
É também usual a terminologia evψ = tgψ −ψ, lida como "evolvente de ψ no ponto P".
É comum encontrar literatura denominando a curva evolvente de curva involuta.

Pelo triângulo retângulo OTP temos:
cosψ = rb/r => acos(rb/r) = ψ
θ = ev(ψ) = tgψ - ψ

θ + ψ = tgψ ângulo de giro da evolvente (importante para ser desenhada)

Portanto a evolvente deve girar ψ + θ para ser formada.

Propriedades:
O comprimento do arco PoT é igual ao comprimento do segmento PT;
Qualquer reta geratriz é tangente à circunferência de base;
PT é o raio de curvatura da evolvente no ponto P;
A reta tangente à evolvente é normal à reta geratriz no ponto correspondente;
O raio de curvatura da evolvente no ponto Po é nulo;
A direção da evolvente na origem (Po) é a do raio de base correspondente.

O ângulo ψ compreendido entre o raio vetor e o raio da circunferência perpendicular a reta tangente a mesma é igual ao ângulo formado pelo prolongamento do raio veto com a reta tangente a evolvente, isso se comprova através da propriedade do triângulo que diz que a soma dos ângulos internos é 180º (ou também pelos ângulos correspondente entre duas retas paralelas cortadas por uma reta transversal).

Comentário
:
Você poderá verificar na figura acima que o comprimento do arco da circunferência que vai do ponto de tangência T ao ponto Po é igual ao comprimento do seguimento de reta que vai do ponto T ao ponto P. A evolvente é formada pelos pontos P que se obtém para cada seguimento de reta TP obtido ao desenrolar o arco TPo.

Poderá obter portanto a evolvente pelo método das coordenadas cartesianas ou pelo das coordenadas polares (ângulo θ e raio vetor dão origem ao ponto P).

Ângulo em radiano é o comprimento do arco da circunferência dividido pelo seu raio (360º = 2π rad).

1.1. Cálculo da Evolvente


A partir da Figura a cima, pode-se determinar as coordenadas polares e cartesianas do ponto P genérico.
Do triângulo OPT tem-se:
rb = r.cosψ (I)

Lembrando que arcPoT = rc
arcPoM + arcMT = arcPoT
arcPoM + arcMT = rc (II)


Dividindo (II) por rb tem-se:
arcPoM/rb + arcMT/rb = rc/rb

Como tg ψ = rc/rb, arcPoM/rb = θ (em radianos) e arcMT/rb = ψ (em radianos)

∴ θ + ψ = tg ψ => θ = tg ψ - ψ

θ é denominado função evolvente de ψ . Praticamente é escrita da forma ev(ψ).
ψ é a inclinação da evolvente.
θ = tg ψ - ψ (III) (com ψ expresso em radianos)
Com θ na forma de função: ev(ψ) = tgψ - ψ
Se ψ estiver em grau, converta-o para radiano: (π . ψ)/180
Repare que: β = θ + ψ => β = tg ψ
Na terminologia em uso para as engrenagens, o ângulo θ também é chamado involuta de ψ sendo indicado com o símbolo invψ ou ainda como função evolvente, evψ.


1.2. Cálculo das Coordenadas Cartesianas


Apartir da figura abaixo, pode-se determinar as coordenadas polares e cartesianas de um ponto P genérico.


Anotações:
O: centro da circunferência de base
arcoTPo = TP (comprimento)
TP, OM, NP, MN, MT, NT, OT, OZ: seguimentos de reta (comprimento)
β = ângulo TÔZ = θ + ψ
θ =ângulo PÔZ (" θ" é a evolvente do ângulo "ψ" no ponto P representado por θ = evψ.

ψ=ânguloTÔP ("ψ" é o ângulo de inclinação da evolvente no ponto P, mede o quanto este ângulo afastou se da reta tangente a evolvente.

r: raio vetor;
rb: raio base

Obs:
OT perpendicular a reta s
reta t perpendicular a reta s
Logo, angulo OPQ = TÔP, angulos alternos interno, cuja tansversal é o segmento de reta OP
β: mede o quanto o arco de circunferência foi esticado, perceba que ao esticar uma circunferência completa com um giro de 360º, a curva da evolvente não girou 360º.

1.3. Coordenadas Cartesianas
NP // eixo-x e MN // ZP // eixo-y
A reta s é tangente a circunferência de base em T e normal a reta t em P
A reta t é tangente a evolvente em P

Como radiano é o comprimento do arco dividido pelo raio da circunferência: b = arcoPoT/OT (em radianos), ou seja:
arcoPoT = TP, OT = rb e NP = MZ

Abscissa:
x = OM + MZ (I)
OM = rb * cosβ (II)

arcoPoT/rb = β (em radiano) por definição de ângulo em radiano, como arcoPoT = TP, então:
TP/rb = β
TP= β*rb (III)

OZ = OM + NP (IV)

Pelo triângulo TNP tem-se:
NP = TP * senβ = MZ (IV)
NP = rb * β * senβ = MZ (V) obtido de (III) e (IV)
Como x = OM + MZ, então:
x = rb * cosβ + rb * β * senβ (VI) obtido de (II) e (IV)

Ordenada:
Analogamente à abscissa.
y = MN
Pelo triângulo OTM tem-se:
senβ = MT/rb , ou seja, MT = senβ * rb (I)
Pelo triângulo TNP tem-se:
cosβ = TN/TP (II)

TP/rb = β (já demonstrado na abscissa)
TP= β*rb (III)

TN =cosβ*β*rb (IV) obtido de (II) e (III)

Como: y = MN = MT - TN
y = senβ * rb - cosβ*β*rb
y = rb * (senβ - β * cos β) (V) obtido de (I) e (IV)

x = rb *( cosβ + β * senβ)
y = rb * (senβ - β * cos β)

θ = ev(ψ)= tg ψ - ψ
β = θ + ψ => β = tg ψ

Obs:
Quando
θ = 360º a curva evolvente faz uma volta completa.


Coordenadas Polares


P(r, θ)
θ: ângulo do raio vetor é a função evolvente de ψ;
r: raio vetor.
O: polo
x: é o eixo polar

Mudança de Coordenadas Polares para Cartesianas:
x = r.cosθ
y = r.senθ


Comentário:

A evolvente possui algumas propriedades que a tornam extremamente importante para a indústria de engrenagens: se duas engrenagens engatadas possuem dentes com o perfil evolvente, elas formam um sistema de engrenagens evolventes. Suas taxas de rotação relativas são constantes enquanto os dentes estão engrenados, e o contato ocorre sempre ao longo de um segmento de reta. Com dentes de outras formas as velocidades de rotação e as forças transmitidas são intermitentes, disto resultando vibrações, ruidos e desgaste excessivo. Por esta razão aproximadamente todas as engrenagens atualmente produzidas possuem dentes com a forma evolvente.

A evolvente de um círculo é também uma forma fundamental em compressores, pois um compressor espiral pode ser construido baseado nesta forma. Compressores espirais fazem menos barulho que compressores convencionais, sendo também mais eficientes.
A curva evolvente é universalmente utilizada como perfil dos dentes das engrenagens.
Outras curvas como as cicloidais são exceções e aplicadas em casos muito específicos.

Um arco de evolvente utilizado como perfil de dentes de engrenagens apresenta as seguintes características:
A usinagem é feita por geração da evolvente que utiliza ferramentas mais simples, facilitando a fabricação;
A relação de velocidades angulares não varia com a variação da distância entre centros (um arco da evolvente funciona estando próximo ou afastado da circunferência de base);
Facilidade de obtenção de dentes corrigidos;
A direção da força resultante entre os dentes permanece invariável.

2. Desenho do Círculo de Base com o Elemento <line>

O objetivo é dar o primeiro passo para o desenho de uma engrenagem de dente reto. Será criado primeiramente o arquivo HTML e depois o arquivo externo SVG com JavaScript que criará o círculo de base. O objetivo desta etapa é aprender a criar curvas SVG com código JavaScript mais elaboradas.

2.1. Arquivo: circle.html
Esse arquivo possui um iframe que abrirá o arquivo circle.svg

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe width="410" height="410" src="circle.svg" scrolling="no" frameborder="0"/><br>
</body>
</html>

2.2. Arquivo externo circle.svg
Este arquivo possui alguns padrões de configuração para linguagem XML com SVG e Javascript, a seguir é explicado a declaração XML, a marcação< !DOCTYPE>, <script> e <![CDATA[... e ...]]>. Para trabalhar plenamente com a linguagem JavaScript com arquivo SVG precisa de tais configurações. Após aprender as regras essenciais podemos prosseguir adaptando o código do CANVAS que criou uma engrenagem de dente reto.

2.2.1. Declaração XML
< ?xml version="1.1" standalone="no"?>
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">

2.2.1.1. Prólogo XML
A marcação <?xml version="1.1"?> deve estar na primeira linha do documento.
O prólogo XML pode conter outras declarações que fornecem informações adicionais sobre o documento como por exemplo a declaração standalone e a declaração encoding para a codificação de caracteres.

A declaração xml é uma instrução de processamento do navegador que identifica o documento como XML/XHMTL. O atributo version especifica a versão do padrão XML. O atributo encoding opcional indica ao navegador como interpretar os bytes associados do documento com base em um conjunto de caracteres específicos (a codificação padrão é UTF-8). O atributo standalone="no" opcional indica que a definição de tipo de documento (DTD) especificada no elemento DOCTYPE será usada em mais de uma validação. A especificação de standalone=”no” não é exatamente necessária. O valor standalone=”no” é pressuposto quando há uma declaração de marcação externa (DTD, nesse caso).
Observe a seguir um prólogo XML com as duas declarações acima comentadas.
Exemplo:
<?xml version="1.0" standalone="yes" encoding="utf-8"?>
standalone="no" (opcional indica que a definição de tipo de documento (DTD) especificada no elemento DOCTYPE será usada em mais de uma validação)
.
encoding="UTF-8" (padrão)
A declaração encoding define a codificação de caracteres adotada no documento, e em XML o padrão geral, e a recomendação, é a adoção de utf-8.

2.2.1.2. Definição do Tipos de Documentos (DTD)
D
ocument Type Definition consiste em definir na marcação< !DOCTYPE> o tipo de documento a ser utilizado para a renderização do próprio documento pelos browsers. Os DTDs definem a estrutura de um documento, onde são especificados quais os elementos e atributos são permitidos no documento.
Embora não seja necessário que um documento XML tenha um DTD correspondente, recomenda-se a utilização de DTDs para garantir a conformidade do documento.
Ferramentas para processar documentos, tais como Web browsers, precisam saber qual é a DTD que o documento (X)HTML usa: esta é razão porque documentos (X)HTML precisam conter logo no seu início uma declaração DTD.

O intercâmbio de informações, na forma de documentos XML, entre organizações (business-to-business) é um exemplo de intercâmbio de documentos XML onde é necessário que estes estejam em conformidade.
As DTDs especificam a estrutura de um documento, e são definidas através da gramática EBNF (Extended Backus-Naur Form), e não na sintaxe XML.
O Doctype é a Declaração do Tipo de Documento ou simplesmente DTD, todo documento (X)HTML deve conter um Doctype logo em seu inicio. É ele que vai dizer para o navegador qual é a versão do (X)HTML que você está usando no arquivo, existem vários tipos de HTML, cada uma com sua regra e algumas diferenças na sintaxe.

Se você deixar de declarar o Doctype em seu arquivo (X)HTML, o navegador tentara “adivinhar” qual é o Doctype, as vezes ele acerta, as vezes não, o que pode provocar uma renderização defeituosa e seu site aparecer “torto” no navegador.

Ao contrário do HTML e do XHTML que possuem, text/html, presente no DOCTYPE, em documento XML não tem qualquer influência sobre o modo de renderização do documento. Dessa forma o uso de DTD em documento XML é facultativo.
Os DTDs são somente para validação, não para identificação de conteúdo.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

2.2.1.3. As Recomendações do W3C para SVG 1.1 compreendem 3 (três) módulos a saber:

SVG 1.1 Full (módulo completo)
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVG 1.1 Basic (módulo simplificado para dispositivos móveis)
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

SVG 1.1 Tiny (módulo simplificado do módulo Basic)
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

Exemplo de marcação com prólogo e DTD para um documento SVG destinado a desktop é mostrado a seguir:
< ?xml version="1.0" standalone="yes" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
O código abaixo não possui a formatação utf-8 na tag <xml>, porém, o arquivo cicle.svg foi salvo com esse formato no editor de texto.

Fórmula do Circulo em JavaScript:
var xa = 100*Math.cos(beta);//coordenada-x do circulo
var ya = 100*Math.sin(beta);//coordenada-y do circulo

Centralização do Circulo no SVG
Para centralizar a imagem SVG criada basta somar na coordenada-x da mesma a metade da sua largura e na coordenada-y somar a metade da sua altura que são os valores das variáveis h e k (metade de 400).
var h=200;//h igual a height/2
var k=200;//k igual a widh/2
h translada a coordenada-x para o centro ou metade da altura do svg.
k translada a coordenada-y para o centro ou metade da largura do svg.
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo

Arquivo: circle.svg: pode ser editado no bloco de notas do windows.
<?xml version="1.0" standalone="no"?><!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x
var k = 200;//translacao da coordenada-y

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta

var coord = new Array();//variavel tipo objeto de lista

function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

for(c=0;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
if(c>0){//criar mil linhas seguidas uma apos a outra
var curva = document.createElementNS(xmlns, "line");//cria um linha
curva.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da linha
curva.setAttributeNS(null,'fill', '#000');//formata a cor da linha
curva.setAttributeNS(null,"x1",coord[c-1].xx);//coordenada-x do primeiro ponto da linha
curva.setAttributeNS(null,"y1",coord[c-1].yy);//coordenada-y do primeiro ponto da linha

curva.setAttributeNS(null,"x2",coord[c].xx);//coordenada-x do segunto ponto da linha
curva.setAttributeNS(null,"y2",coord[c].yy);//coordenada-y do segunto ponto da linha

document.documentElement.appendChild(curva);//adicionar a linha no documento
}
}

});
]]></script>
</svg>

Obs:
- O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento.

- Inserção de código JavaScript em XML ou SVG
Na sintaxe abaixo, tudo entre <![CDATA[... e ...]] > é tratado como dados de caracteres e não como marcação., assim os sinais < e > não são interpretados como tags.
<script type="application/ecmascript">
<![CDATA[
<Mensagem> digite aqui o código JavaScript </Mensagem>
]] >
</script >

- Scripting para especificar a linguagem usada:
<script> ou <script type="text/ecmascript">:é o padrão (default) para qualquer código, inclusive para funções a ser executadas antes de ser disparado o carregamento do SVG. Criar um arquivo texto ECMAScript ou <script type="application/ecmascript">
<script type="text/javascript">: para o HTML 4 criar um arquivo texto ECMAScript

- Arquivo JavaScript externo
Para o HTML4: <script type="text/javascript" src="arquivo.js"></script>
Para o HTML5: <script src="arquivo.js"></script>
Para o SVG: <script type="text/ecmascript" xlink:href="arquivo.js"/>

- SVG
A declaração de namespace é fornecida por um atributo xmlns. Este atributo diz que a tag <svg> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de namespace 'http://www.w3.org/2000/svg' que é, com certeza, SVG.

Então, para criar um elemento SVG rect usando document.createElementNS(), você deve escrever:
document.createElementNS('http://www.w3.org/2000/svg', 'rect');
Mas para recuperar o valor de atributo x em um elemento SVG rect, você deve escrever:
rect.getAttributeNS(null, 'x');

Obs: ao trabalhar com JavaScript e HTML a execução do código é feita de cima para baixo, essa e a característica da linguagem de marcação. Ou seja, o código não consegue usar uma variável antes da sua atribuição.
O iframe abaixo foi utilizado para incluir o arquivo circle.svg na presente página.
<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/circle.svg" scrolling="no"/><br>

Também pode-se testar o arquivo circle.svg com um link como uma página HTML.
Link para circle.svg

3. Desenho do Círculo de Base e da Evolvente com o Elemento <line>

A curva da evolvente será feita com um código parecido com o código que criou o círculo de base, só mudar a fórmula das coordenadas do círcula para a fórmula das coordenadas da evolvente. As novas variáveis devem ter nomes diferentes como sempre ocorre em programação.

Fórmula da Evolvente em JavaScript:
var xb=100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=100*Math.sin(beta)-100*beta*Math.cos(beta);//coordenada-y da evolvente no sistema

Centralização da evolvente no SVG
Para centralizar a imagem SVG criada basta somar na coordenada-x da mesma a metade da sua largura e na coordenada-y somar a metade da sua altura que são os valores das variáveis h e k (metade de 400).
var h=200;//h igual a height/2, ou seja, 400/2
var k=200;//k igual a widh/2, ou seja, 400/2
h translada a coordenada-x para o centro ou metade da altura do svg.
k translada a coordenada-y para o centro ou metade da largura do svg.
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=k+100*Math.sin(beta)-100*beta*Math.cos(beta);//coordenada-y da evolvente centralizada

β: mede o quanto o arco de circunferência foi esticado (desenrrolado), perceba que ao esticar uma circunferência completa com um giro de 360º, a curva da evolvente não girou 360º.
step = 2*Math.PI/1000: significa 2π radianos dividido por 1000.

Conversão do Stema de Coordenadas da Tela para o Cartesiano
-Transfomação direta na coordenada-y: multiplicar por -1 e soma 400 (height)
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano

Obs:
document.getElementById("id1"): só faz uma transformação
β: foi escolhido um valor apenas para teste de 360º ou 2pi radianos.
Para β = 0º tem-se o primeiro ponto com y=0 e x=rb, Po(0,rb) é o início da evolvente.

Arquivo: evol1.svg
<?xml version="1.0" standalone="no"?> <!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x, centralizar
var k = 200;//translacao da coordenada-y, centralizar

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta

function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

//circulo base
var coord = new Array();//variavel tipo objeto de lista para o circulo
for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

for(c=0;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
if(c>0){//criar mil linhas seguidas uma apos a outra
var curva = document.createElementNS(xmlns, "line");//cria um linha
curva.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
curva.setAttributeNS(null,'fill', '#000');//formata a cor da linha
curva.setAttributeNS(null,"x1",coord[c-1].xx);//coordenada-x do primeiro ponto da linha
curva.setAttributeNS(null,"y1",coord[c-1].yy);//coordenada-y do primeiro ponto da linha

curva.setAttributeNS(null,"x2",coord[c].xx);//coordenada-x do segunto ponto da linha
curva.setAttributeNS(null,"y2",coord[c].yy);//coordenada-y do segunto ponto da linha

document.documentElement.appendChild(curva);//adicionar a curva no documento
}
}



//evolvente
var evol = new Array();//variavel tipo objeto de lista para a evolvente

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano
evol.push(new Point2D(xb,yb));//preecnimento da lista com objetos (Point2D)
}

for(c2=0;c2<=999;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)
if(c2>0){//criar mil linhas seguidas uma apos a outra
var curva2 = document.createElementNS(xmlns, "line");//cria um linha
curva2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
curva2.setAttributeNS(null,'fill', '#000');//formata a cor da linha
curva2.setAttributeNS(null,"x1",evol[c2-1].xx);//coordenada-x do primeiro ponto da linha
curva2.setAttributeNS(null,"y1",evol[c2-1].yy);//coordenada-y do primeiro ponto da linha

curva2.setAttributeNS(null,"x2",evol[c2].xx);//coordenada-x do segunto ponto da linha
curva2.setAttributeNS(null,"y2",evol[c2].yy);//coordenada-y do segunto ponto da linha

document.documentElement.appendChild(curva2);//adicionar a curva no documento
}
}

});
]]></script>
</svg>


O iframe abaixo foi utilizado para incluir o arquivo evol1.svg na presente página, caso queira testá-lo insira o mesmo em um página HTML como no arquivo circle.html.

<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/evol1.svg" scrolling="no"/><br>


Também pode-se testar o arquivo evol.svg com um link como uma página HTML.
Link para evol1.svg

1) Centralização da Figura SVG
A referência para o desenho é o ponto de origem no sistema de coordenadas, x=0 e y=0, (0,0).
Para centralizar a figura os pontos devem ser transladados na metade do comprimento do SVG para o eixo-x e metade da altura para o eixo-y.

2) Translação Vertical no Eixo Cartesiano
É utilizado para deslocar a figura desenhada no eixo-y, k=200.
Simplesmente soma-se um valor "k" na f(x), x é o mesmo.
f(x) → k + f(x)
k > 0 para cima ↑
k < 0 para baixo ↓

3) Translação Horizontal no Eixo Cartesiano
É utilizado para deslocar a figura desenhada no eixo-x, h=200
x → x + h
h > 0 deslocamento a figura para a esquerda ←, isto significa que o eixo-x se deslocou para a direita e a figura ficou parado, com isso, a figura fica à esquerda.
h < 0 deslocamento a figura para a direita → , isto significa que o eixo-x se deslocou para à esquerda e a figura ficou parado, com isso, a figura fica à direita.

4) Conversão para o Sistema de Coordenadas Cartesiano
O canvas e o SVG podem ser centralizados da mesma forma, o SVG abaixo em possui width=500 e height=400. Seu sistema de coordenadas é o mesmo da tela do computador, ou seja, o eixo-y é positivo para baixo. O eixo-x é igual a do sistema cartesiano.
A conversão consistem em inverter os sinais do eixo-y, assim a seta positiva fica para cima, no SVG utiliza-se a função scale(1,-1) que se colocada antes de fazer o desenho não precisa transladar os pontos para cima, logicamente, se colocada após fazer o desenho temos de usar também a função translate(0,400).


Ou seja::
Para converte o sistema de coordenadas da tela para o sistema cartesiano tem que inverter o sinal das coordenadas do eixo-y (multiplicar por -1) e somar o valor da altura do SVG. Para centralizar a imagem SVG criada basta somar na coordenada-x da mesma a metade da sua largura e na coordenada-y somar a metade da sua altura. Se utilizar a função scale(1,-1) antes de fazer o desenho não é necessário a translação.
As coordenadas da tela do computador não mudam porque são referências, quem muda são as coordenadas da imagem SVG.

Conversão do Sistema de Coordenadas da Tela para o Sistema Cartesiano
1) Conversão ou transformação direta na coordenada-y:
var x2=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var y2=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano
2) Transformação de Atributo do Elemento Raiz <svg>:
Sistema cartesiano, posicionar o código abaixo antes dos desenhos.
svgTransforme = document.getElementById("id1");
trans="translate("+0+","+0+")";// apenas para teste translada zero
scal="scale("+1+","+-1+")";//para mudar a escala do eixoY para cima e origem do sistema no canto inferior esquerdo
svgTransforme.setAttributeNS(null,"transform",trans+scal);//erro no Internet Explore 11

- NÃO funcionou no Internet Explore 11.
- O segundo e terceiro parametros do método setAttributeNS(null,...,...) é do tipo texto, como os valores do atributo transform são duas funções, temos que inserí-las como texto.
- A função translate(x,y) translada a origem do sistema de coordenadas para (x,y), em string fica assim: "translate("+x+","+y+")"
- A função scale(1,-1) muda o eixo-y para cima, em string fica assim: "scale("+1+","+-1+")".
- os números x, y, 1 e -1 não precisão de aspas duplo, número negativo precisa de sinal de menos, número positivo não precisa de sinal de mais, esses quatros numeros são parâmetros das funçções translate(0,0) e scale(1,-1).
- Os sinais de aspas ("") são utilizados converter um nome de função para texto.
- O sinal de mais (+) é utilizado para concatenar strings em JavaScript.
- A função translate(x,y) translada a origem do sistema de coordenadas do <svg>
- A função scale(1,-1) translada a origem do sistema de coordenadas do <svg> para o canto inferior esquerdo e inverte o eixo-y (positivo para cima).

Arquivo: evol2.svg
<?xml version="1.0" standalone="no"?> <!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x, centralizar
var k = 200;//translacao da coordenada-y, centralizar

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta


function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

svgTransforme = document.getElementById("id1");//posicionamento antes dos desenhos
scal="scale("+1+","+-1+")";
trans="translate("+0+","+0+")";// apenas para teste
svgTransforme.setAttributeNS(null,"transform",scal);//erro no windows

//circulo base
var coord = new Array();//variavel tipo objeto de lista para o circulo
for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

for(c=0;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
if(c>0){//criar mil linhas seguidas uma apos a outra
var curva = document.createElementNS(xmlns, "line");//cria um linha
curva.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
curva.setAttributeNS(null,'fill', '#000');//formata a cor da linha

curva.setAttributeNS(null,"x1",coord[c-1].xx);//coordenada-x do primeiro ponto da linha
curva.setAttributeNS(null,"y1",coord[c-1].yy);//coordenada-y do primeiro ponto da linha

curva.setAttributeNS(null,"x2",coord[c].xx);//coordenada-x do segunto ponto da linha
curva.setAttributeNS(null,"y2",coord[c].yy);//coordenada-y do segunto ponto da linha

document.documentElement.appendChild(curva);//adicionar a curva no documento
}
}

//evolvente
var evol = new Array();//variavel tipo objeto de lista para a evolvente

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=k+100*Math.sin(beta)-100*beta*Math.cos(beta);//coordenada-y da evolvente no sistema cartesiano
evol.push(new Point2D(xb,yb));//preecnimento da lista com objetos (Point2D)
}

for(c2=0;c2<=999;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)
if(c2>0){//criar mil linhas seguidas uma apos a outra
var curva2 = document.createElementNS(xmlns, "line");//cria um linha
curva2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
curva2.setAttributeNS(null,'fill', '#000');//formata a cor da linha

curva2.setAttributeNS(null,"x1",evol[c2-1].xx);//coordenada-x do primeiro ponto da linha
curva2.setAttributeNS(null,"y1",evol[c2-1].yy);//coordenada-y do primeiro ponto da linha

curva2.setAttributeNS(null,"x2",evol[c2].xx);//coordenada-x do segunto ponto da linha
curva2.setAttributeNS(null,"y2",evol[c2].yy);//coordenada-y do segunto ponto da linha

document.documentElement.appendChild(curva2);//adicionar a curva no documento
}
}

});
]]></script>
</svg>


O iframe abaixo foi utilizado para incluir o arquivo evol2.svg na presente página, caso queira testá-lo insira o mesmo em um página HTML como no arquivo circle.html.

<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/evol2.svg" scrolling="no"/><br>


Também pode-se testar o arquivo evol2.svg com um link como uma página HTML.
Link para evol2.svg

4. Desenho do Círculo de Base e da Evolvente Utilizando <polyline>

Vamos refazer o código evol1.svg utilizando o elemento polyline em vez de <line>. As mudanças estão destacadas em vermelho.

Mudança para o Círculo de Base:
if(c>0){//criar mil linhas seguidas uma apos a outra
xx1=coord[c-1].xx;
yy1=coord[c-1].yy;
xx2=coord[c].xx;
yy2=coord[c].yy;

var pol = document.createElementNS(xmlns, "polyline");//cria uma polilinha
pol.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol.setAttributeNS(null,'points',[xx1,yy1,xx2,yy2]);
document.documentElement.appendChild(pol);//adicionar a curva no documento
}

Mudança para a Evolvente
if(c2>0){//criar mil linhas seguidas uma apos a outra
xx1=evol[c2].xx;
yy1=evol[c2].yy;
xx2=evol[c2+1].xx;
yy2=evol[c2+1].yy;

var pol2 = document.createElementNS(xmlns, "polyline");//cria um linha
pol2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol2.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol2.setAttributeNS(null,'points',[xx1,yy1,xx2,yy2]);
document.documentElement.appendChild(pol2);//adicionar a curva no documento
}

Arquivo: evolpol.svg
<?xml version="1.0" standalone="no"?> <!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x, centralizar
var k = 200;//translacao da coordenada-y, centralizar

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta

function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

//circulo base
var coord = new Array();//variavel tipo objeto de lista para o circulo
for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

for(c=0;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)

if(c>0){//criar mil linhas seguidas uma apos a outra
xx1=coord[c-1].xx;
yy1=coord[c-1].yy;
xx2=coord[c].xx;
yy2=coord[c].yy;

var pol = document.createElementNS(xmlns, "polyline");//cria uma polilinha
pol.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol.setAttributeNS(null,'points',[xx1,yy1,xx2,yy2]);
document.documentElement.appendChild(pol);//adicionar a curva no documento
}
}


//evolvente
var evol = new Array();//variavel tipo objeto de lista para a evolvente

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano
evol.push(new Point2D(xb,yb));//preecnimento da lista com objetos (Point2D)
}

for(c2=0;c2<=999;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)

if(c2>0){//criar mil linhas seguidas uma apos a outra
xx1=evol[c2].xx;
yy1=evol[c2].yy;
xx2=evol[c2+1].xx;
yy2=evol[c2+1].yy;

var pol2 = document.createElementNS(xmlns, "polyline");//cria um linha
pol2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol2.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol2.setAttributeNS(null,'points',[xx1,yy1,xx2,yy2]);
document.documentElement.appendChild(pol2);//adicionar a curva no documento
}
}

});
]]></script>
</svg>

O iframe abaixo foi utilizado para incluir o arquivo evolpol.svg na presente página, caso queira testá-lo insira o mesmo em um página HTML como no arquivo circle.html.

<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/evolpol.svg" scrolling="no"/><br>


Também pode-se testar o arquivo evolpol.svg com um link como uma página HTML.
Link para evolpol.svg

5. Desenho do Círculo de Base e da Evolvente Utilizando um <polyline> para Cada Um


Após executar o arquivo acima, evolpol.svg, no GoogleChrome acesse a ferramenta do desenvolvedor e veja no elements que foram criados vários elemento polyline. Essa técnica pode ser últil, porém, é conveniente também criar apenas um polyline, assim os atributos serão configurados para apenas um elemento e não mil como foi feito no código acima.

Vamos refazer o código evolpol.svg criando apenas um elemento polyline em vez de mil. As mudanças estão destacadas em vermelho no código e separadas logo abaixo.

Mudança para o Círculo de Base:
pts=coord[0].xx+","+coord[0].yy;//tipo texto

for(c=1;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
pts=pts+","+coord[c].xx+","+coord[c].yy;//lista acumulada
}

var pol = document.createElementNS(xmlns, "polyline");//cria uma polilinha
pol.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da linha
pol.setAttributeNS(null,'fill','none');//importante para o polyline ser umalinha
pol.setAttributeNS(null,'points',[pts]);
document.documentElement.appendChild(pol);//adicionar a curva no documento

Obs: a lista acumulada é uma sequencia de coordenadas x,y de cada ponto do array coord separados por vígulas.

Mudança para a Evolvente
pts2=evol[0].xx+","+evol[0].yy;//tipo texto

for(c2=1;c2<=999;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)
pts2=pts2+","+evol[c2].xx+","+evol[c2].yy;//lista acumulada

}

var pol2 = document.createElementNS(xmlns, "polyline");//cria um linha
pol2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol2.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol2.setAttributeNS(null,'fill','none'); //importante para o polyline ser uma linha
pol2.setAttributeNS(null,'points',[pts2]);
document.documentElement.appendChild(pol2);//adicionar a curva no documento

Obs: a lista acumulada é uma sequencia de coordenadas x,y de cada ponto do array evol separados por vígulas.

Arquivo: evolpol2.svg
<?xml version="1.0" standalone="no"?> <!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x, centralizar
var k = 200;//translacao da coordenada-y, centralizar

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta

function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

//circulo base
var coord = new Array();//variavel tipo objeto de lista para o circulo
for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

pts=coord[0].xx+","+coord[0].yy;

for(c=1;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
pts=pts+","+coord[c].xx+","+coord[c].yy;
}

var pol = document.createElementNS(xmlns, "polyline");//cria uma polilinha
pol.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da linha
pol.setAttributeNS(null,'fill','none');//importante para o polyline ser uma linha
pol.setAttributeNS(null,'points',[pts]);
document.documentElement.appendChild(pol);//adicionar a curva no documento

//evolvente
var evol = new Array();//variavel tipo objeto de lista para a evolvente

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano
evol.push(new Point2D(xb,yb));//preecnimento da lista com objetos (Point2D)
}
pts2=evol[0].xx+","+evol[0].yy;

for(c2=1;c2<=999;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)
pts2=pts2+","+evol[c2].xx+","+evol[c2].yy;

}

var pol2 = document.createElementNS(xmlns, "polyline");//cria um linha
pol2.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da lina
pol2.setAttributeNS(null,'fill', '#000');//formata a cor da linha
pol2.setAttributeNS(null,'fill','none'); //importante para o polyline ser umalinha
pol2.setAttributeNS(null,'points',[pts2]);
document.documentElement.appendChild(pol2);//adicionar a curva no documento

});
]]></script>
</svg>


O iframe abaixo foi utilizado para incluir o arquivo evolpol2.svg na presente página, caso queira testá-lo insira o mesmo em um página HTML como no arquivo circle.html.

<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/evolpol2.svg" scrolling="no"/><br>


Também pode-se testar o arquivo evolpol2.svg com um link como uma página HTML.
Link para evolpol2.svg


6. Desenho do Círculo de Base e da Evolvente Utilizando apenas um <polyline> para Ambos


Vamos alterar o último arquivo (evolplo2.svg) com a intenção de fazer o circulo base e a evolvente com apenas um <polyline>, assim, todo o desenho pertencerá a apenas um elemento.

Mudanças do código do arquivo evolpol2.svg:

O array coord possuirá dois mil (2000) pontos, os pontos de índices 0 a 999 pertencem ao circulo base e os pontos de índice 1000 a 2000 pertencem a evolvente.
coord[0].xx,coord[0] a coord[999].xx,coord[999] => formam o círculo base.
coord[1000].xx,coord[1000] a coord[2000].xx,coord[2000] => formam a evolvente.

Após todos os pontos do circulo e da evolvente estivem sidos incluídos no array coord é que o elemento polyline (pol) será incluido no documento.

document.documentElement.appendChild(pol);

Mudança para o Círculo de Base:
Código anterior (evolpol2.svg)
Novo código (evolpol3.svg)
pts=coord[0].xx+","+coord[0].yy;

for(c=1;c<=999;c=c+1){
pts=pts+","+coord[c].xx+","+coord[c].yy;
}

var pol = document.createElementNS(xmlns, "polyline");
pol.setAttributeNS(null,'stroke-width', '1px');
pol.setAttributeNS(null,'fill','none');
pol.setAttributeNS(null,'points',[pts]);
document.documentElement.appendChild(pol);
pts=coord[0].xx+","+coord[0].yy;


for(c=1;c<=999;c=c+1){
pts=pts+","+coord[c].xx+","+coord[c].yy;
}

var pol = document.createElementNS(xmlns, "polyline");
pol.setAttributeNS(null,'stroke-width', '1px');
pol.setAttributeNS(null,'fill','none');


Mudança para a Evolvente
Código anterior (evolpol2.svg) Novo código (evolpol3.svg)
pts2=evol[0].xx+","+evol[0].yy;

for(c2=1;c2<=1000;c2=c2+1){
pts2=pts2+","+evol[c2].xx+","+evol[c2].yy;

}

var pol2 = document.createElementNS(xmlns, "polyline");
pol2.setAttributeNS(null,'stroke-width', '1px');
pol2.setAttributeNS(null,'fill', '#000');
pol2.setAttributeNS(null,'fill','none');
pol2.setAttributeNS(null,'points',[pts2]);
document.documentElement.appendChild(pol2);
for(c2=1000;c2<=2000;c2=c2+1){
pts=pts+","+coord[c2].xx+","+coord[c2].yy;

}

pol.setAttributeNS(null,'points',[pts]);
document.documentElement.appendChild(pol);

Arquivo: evolpol3.svg
<?xml version="1.0" standalone="no"?> <!--cabecalho-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" stroke="black" stroke-width="0.5px" id="id1">

<script type="application/ecmascript"><![CDATA[

document.addEventListener("DOMContentLoaded", function(event) {//O evento DOMContentLoaded sera acionado quando todo o HTML (apenas) foi completamente carregado e analisado
var h = 200;//translacao da coordenada-x, centralizar
var k = 200;//translacao da coordenada-y, centralizar

var xmlns="http://www.w3.org/2000/svg";
var step = 2*Math.PI/1000; //passo do angulo beta

function Point2D(xx,yy) {//funcao com dois argumentos iguais as respectivas variaveis
this.xx = xx;
this.yy = yy;
}

//circulo base
var coord = new Array();//variavel tipo objeto de lista para o circulo
for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xa = h + 100*Math.cos(beta);//coordenada-x do circulo
var ya = k + 100*Math.sin(beta);//coordenada-y do circulo
coord.push(new Point2D(xa,ya));//preecnimento da lista com objetos (Point2D)
}

pts=coord[0].xx+","+coord[0].yy;//tipo texto


for(c=1;c<=999;c=c+1){ //loop com contador c igual ao numero de step (passos)
pts=pts+","+coord[c].xx+","+coord[c].yy;//lista acumulada
}

var pol = document.createElementNS(xmlns, "polyline");//cria uma polilinha
pol.setAttributeNS(null,'stroke-width', '1px');//formata a espessura da linha
pol.setAttributeNS(null,'fill','none');//importante para o polyline ser umalinha

//evolvente

for(beta=0;beta<=2*Math.PI;beta+=step){ //loop de preenchimento
var xb=h+100*Math.cos(beta)+100*beta*Math.sin(beta);//coordenada-x da evolvente
var yb=-1*(k+100*Math.sin(beta)-100*beta*Math.cos(beta))+400;//coordenada-y da evolvente no sistema cartesiano
coord.push(new Point2D(xb,yb));//preecnimento da lista com objetos (Point2D)
}

for(c2=1000;c2<=2000;c2=c2+1){ //loop com contador 2 igual ao numero de step (passos)
pts=pts+","+coord[c2].xx+","+coord[c2].yy;//lista acumulada

}

pol.setAttributeNS(null,'points',[pts]);
document.documentElement.appendChild(pol);//adicionar a polylinha no documento

});
]]></script>
</svg>


O iframe abaixo foi utilizado para incluir o arquivo evolpol3.svg na presente página, caso queira testá-lo insira o mesmo em um página HTML como no arquivo circle.html.

<iframe style="border-style: solid; border-width: 1px;" width="410" height="410" src="imgsvg/evolpol3.svg" scrolling="no"/><br>


Também pode-se testar o arquivo evolpol3.svg com um link como uma página HTML.
Link para evolpol3.svg


A próxima etapa será o desenho do dente da engrenagem e um loop para a criação da engrenagem de dente reto. É só adaptar os códigos usados na criação da engrenagem usando o CANVAS do HTML5.


Tabela de conversão de ângulo de graus para radianos e cálculo de sua evolvente:
Criada com o BrOffice, ψ está em graus, o mesmo foi convertido para radiano: (π.ψ)/180 conforme a fórmula=TAN(((B3+0,1)*PI())/180) - ((B3+0,1)*PI())/180.
Exemplo: ev(10º) = 0,00179406rd , ev(10,1º)=0,00184888rd, ...

B
ev(ψ)= tg ψ - ψ (em radianos)
2
Graus 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 0,9 1,0
3
10 0,00179406 0,00184888 0,00190482 0,00196189 0,00202010 0,00207947 0,00214001 0,00220173 0,00226464 0,00232876 0,00239409
4
11 0,00239409 0,00246065 0,00252846 0,00259751 0,00266783 0,00273944 0,00281233 0,00288652 0,00296203 0,00303887 0,00311705
5
12 0,00311705 0,00319658 0,00327748 0,00335976 0,00344343 0,00352851 0,00361500 0,00370292 0,00379228 0,00388310 0,00397539
6
13 0,00397539 0,00406916 0,00416442 0,00426119 0,00435948 0,00445931 0,00456068 0,00466362 0,00476812 0,00487421 0,00498191
7
14 0,00498191 0,00509121 0,00520215 0,00531472 0,00542895 0,00554484 0,00566242 0,00578169 0,00590267 0,00602537 0,00614980
8
15 0,00614980 0,00627599 0,00640394 0,00653367 0,00666519 0,00679851 0,00693365 0,00707063 0,00720946 0,00735014 0,00749271
9
16 0,00749271 0,00763716 0,00778352 0,00793180 0,00808201 0,00823417 0,00838829 0,00854439 0,00870249 0,00886259 0,00902471
10
17 0,00902471 0,00918887 0,00935508 0,00952336 0,00969371 0,00986617 0,01004074 0,01021743 0,01039627 0,01057726 0,01076043
11
18 0,01076043 0,01094579 0,01113335 0,01132313 0,01151514 0,01170941 0,01190594 0,01210476 0,01230587 0,01250930 0,01271506
12
19 0,01271506 0,01292316 0,01313363 0,01334647 0,01356172 0,01377937 0,01399945 0,01422197 0,01444696 0,01467443 0,01490438
13
20 0,01490438 0,01513685 0,01537185 0,01560939 0,01584950 0,01609218 0,01633746 0,01658536 0,01683588 0,01708905 0,01734489
14
21 0,01734489 0,01760341 0,01786464 0,01812858 0,01839525 0,01866469 0,01893689 0,01921188 0,01948969 0,01977032 0,02005379
15
22 0,02005379 0,02034013 0,02062935 0,02092147 0,02121650 0,02151448 0,02181541 0,02211932 0,02242622 0,02273614 0,02304909
16
23 0,02304909 0,02336509 0,02368416 0,02400632 0,02433160 0,02466000 0,02499155 0,02532628 0,02566419 0,02600531 0,02634966
17
24 0,02634966 0,02669727 0,02704814 0,02740230 0,02775978 0,02812059 0,02848475 0,02885229 0,02922322 0,02959756 0,02997535
18
25 0,02997535 0,03035659 0,03074131 0,03112953 0,03152128 0,03191657 0,03231543 0,03271788 0,03312394 0,03353363 0,03394698
19
26 0,03394698 0,03436401 0,03478474 0,03520919 0,03563739 0,03606936 0,03650512 0,03694469 0,03738811 0,03783539 0,03828655
20
27 0,03828655 0,03874163 0,03920063 0,03966360 0,04013055 0,04060151 0,04107649 0,04155553 0,04203866 0,04252588 0,04301724
21
28 0,04301724 0,04351275 0,04401245 0,04451635 0,04502448 0,04553686 0,04605353 0,04657451 0,04709983 0,04762950 0,04816357
22
29 0,04816357 0,04870205 0,04924497 0,04979236 0,05034424 0,05090065 0,05146161 0,05202714 0,05259728 0,05317206 0,05375149
23
30 0,05375149 0,05433562 0,05492446 0,05551806 0,05611642 0,05671959 0,05732760 0,05794047 0,05855823 0,05918091 0,05980855


Referências:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
https://developer.mozilla.org/pt-BR/docs/Web/SVG/Intensivo_de_Namespaces
http://www.w3.org/TR/2000/CR-SVG-20001102/expanded-toc.html
https://xmlgraphics.apache.org/batik/using/scripting/ecmascript.html
http://www.ecma-international.org/publications/standards/Ecma-262.htm