EDITAR:

Eu finalmente encontrei uma maneira de corroer e dilatar polígonos (deslocamento) para que a nova geometria fosse criada usando a biblioteca do Clipper:https://sourceforge.net/projects/jsclipper/

Demonstração ao vivo do Javascript Clipper:http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html

O Clipper só pode manipular polígonos ou multi-polígonos (por exemplo, polígonos com furos), para que ele funcione com outros objetos gráficos do formato SVG, eles devem ser convertidos em linhas retas. Pelo menos os caminhos são fáceis de converter em linhas usandopath.getTotalLength() epath.getPointAtLength() (http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/).

A outra possibilidade é usar essa técnica similar (que não cria nova geometria):https://stackoverflow.com/a/12723835/1691517

Existe alguma maneira de corroer e dilatar formas em SVG via Javascript?

Eu tenho o seguinte exemplo de SVG:http://jsfiddle.net/timo2012/2S4Kt/1/

Existem três formas, azul é original, verde é corroído (diluído) e vermelho é dilatado (em negrito). Eles são feitos no Illustrator.

Eu testei filtros erodir e dilatar, mas o efeito não é tão bom:https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg

Depois de algumas horas pesquisando pela internet, encontrei apenas exemplos de erosão e dilatação de imagens bitmap, mas nada sobre formas vetoriais.

Consegui dilatar e erodir polígonos SVG usando Shapely (http://toblerity.github.com/shapely/manual.html ) em Python, enviando pontos de caminho através de chamada Ajax para script PHP que faz chamada de system () para script Python, mas este método é lento e requer servidor para fazer o trabalho que poderia ser feito do lado do cliente.

Este é o meu código para dilatar e erodir em Python (como você vê, é bem curto):

#!/usr/bin/python26

from shapely.geometry import Polygon
from shapely.geometry import MultiPolygon

import sys

if len(sys.argv)>2:
  inset=eval(sys.argv[1])
  coords=eval(sys.argv[2])
else:
  sys.exit()

bowtie = Polygon(coords)
clean = bowtie.buffer(inset)
clean = clean.simplify(1, preserve_topology=False)
if clean.length>0:
  if clean.geom_type=="MultiPolygon":
    for n in range(0, len(clean)):
      print list(clean[n].exterior.coords)
      #print "\n"
  elif clean.geom_type=="Polygon":
    print list(clean.exterior.coords)

Também encontrar este documento, que tenta definir dilatar e erodir em termos matemáticos:http://en.wikipedia.org/wiki/Mathematical_morphology

Há uma frase "A idéia básica na morfologia binária é sondar uma imagem com uma forma simples e predefinida, tirando conclusões sobre como essa forma se ajusta ou perde as formas na imagem. Essa simples" sonda "é chamada de elemento estruturante, e é em si uma imagem binária (ou seja, um subconjunto do espaço ou grade). "

Eu suponho que este método poderia ser usado em formas vetoriais morphing, mas como ...

EDIT: Um comentário em uma resposta levantou um possível problema de usar filtros em vez de criar uma nova geometria: se alguém quiser adicionar alças de arrasto a pontos de polígono, as alças de arrastar podem parecer estar no lugar errado. Isso pode ser aceitável, porque, então, a impressão é de que os dados do caminho original não foram alterados, o que é realmente o caso dos filtros, mas, após testes adicionais, provou que a qualidade é um problema maior. De acordo comisto eisto O filtro SVG usa a representação em pixels do objeto gráfico vetorial em vez dos próprios dados do caminho, o que leva anão tão bons resultados.

EDIT2: POSSÍVEL SOLUÇÃO ALTERNATIVA: Uma das respostas nesta página me levou a usar traços e máscara de largura variável para obter uma boa solução para esse problema. Fiz alguns testes e fui implementadoum efeito de caminho de deslocamento semelhante ao Adobe Illustrator.