Skip to main content
Retirado o link para a documentação do Opera, que está inválido
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

A animação do atributo d deve ser feita com SMIL, pois o CSS não permite a animação desse atributonão permite a animação desse atributo.

A animação do atributo d deve ser feita com SMIL, pois o CSS não permite a animação desse atributo.

A animação do atributo d deve ser feita com SMIL, pois o CSS não permite a animação desse atributo.

Fim da Recompensa com 500 pontos de reputação concedidos por Felipe Assunção
Correção do código de exemplo e acréscimo do link com info sobre o atributo pathSegList
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
const svgNS = 'http://www.w3.org/2000/svg';

// Referência ao objeto SVG (sem o namespace)
svgRef = document.getElementById('svgImg01');

// Cria um caminho (usa namespace)
pathRef = document.createElementNS(svgNS, "path");

// Atributos são acessados sem o namespace
pathRef.setAttribute('id','cam');
pathRef.style =setAttribute('style', "fill:#000000";#000000");
pathRef.setAttribute('d', 'M0 0 Z');

// Adiciona o caminho criado ao documento SVG
svgRef.appendChild(pathRef);

Observação: O exemplo no jsfiddle foi testado e funciona com o navegadoros navegadores FireFox 43.0.4 64bit, executa mas apresenta problemas de preenchimento de cores nos navegadores Opera 31.0, Safari 9.0.3 e Internet Explorer 11 e, porém, não funcionanão funciona no Google Chrome (ver conclusão, no final da resposta).

const svgNS = 'http://www.w3.org/2000/svg';

// Referência ao objeto SVG (sem o namespace)
svgRef = document.getElementById('svgImg01');

// Cria um caminho (usa namespace)
pathRef = document.createElementNS(svgNS, "path");

// Atributos são acessados sem o namespace
pathRef.setAttribute('id','cam');
pathRef.style = "fill:#000000";
pathRef.setAttribute('d', 'M0 0 Z');

// Adiciona o caminho criado ao documento SVG
svgRef.appendChild(pathRef);

Observação: O exemplo no jsfiddle foi testado e funciona com o navegador FireFox 43.0.4 64bit, executa mas apresenta problemas de preenchimento de cores nos navegadores Opera 31.0, Safari 9.0.3 e Internet Explorer 11 e não funciona no Google Chrome (ver conclusão, no final da resposta).

const svgNS = 'http://www.w3.org/2000/svg';

// Referência ao objeto SVG (sem o namespace)
svgRef = document.getElementById('svgImg01');

// Cria um caminho (usa namespace)
pathRef = document.createElementNS(svgNS, "path");

// Atributos são acessados sem o namespace
pathRef.setAttribute('id','cam');
pathRef.setAttribute('style', "fill:#000000");
pathRef.setAttribute('d', 'M0 0 Z');

// Adiciona o caminho criado ao documento SVG
svgRef.appendChild(pathRef);

Observação: O exemplo no jsfiddle foi testado com os navegadores FireFox 43.0.4 64bit, Opera 31.0, Safari 9.0.3 e Internet Explorer 11, porém, não funciona no Google Chrome.

Atualização da resposta com exemplo de animação com Javascript
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Remoção de excesso de figuras
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Acrescentei imagens ilustrativas da animação
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Complemento da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Atualização da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Complemento da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
correção da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Melhoria na conclusão da resposta
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando
Fonte Link
Gomiero
  • 5,4mil
  • 2
  • 17
  • 36
Carregando