РЕДАКТИРОВАТЬ:

Наконец-то я нашел способ размыть и расширить полигоны (смещение), чтобы новая геометрия создавалась с использованием библиотеки Clipper: https://sourceforge.net/projects/jsclipper/

Живая демоверсия Javascript Clipper: http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html

Clipper может обрабатывать только многоугольники или многоугольники (например, многоугольники с отверстиями), поэтому для работы с другими графическими объектами формата SVG их необходимо преобразовать в прямые линии. По крайней мере, пути довольно легко преобразовать в строки, используяpath.getTotalLength() а такжеpath.getPointAtLength() (http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/).

Другая возможность - использовать эту технику (которая не создает новую геометрию): https://stackoverflow.com/a/12723835/1691517

Есть ли способ разрушать и расширять фигуры в SVG через Javascript?

У меня есть следующий пример SVG: http://jsfiddle.net/timo2012/2S4Kt/1/

Есть три формы, синий оригинал, зеленый размыт (истончен) и красный расширен (выделен жирным шрифтом). Они сделаны в Illustrator.

Я проверил фильтры эрозии и расширения, но эффект не так хорош: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg

После нескольких часов поиска в интернете я нашел только примеры об эрозии и расширении растровых изображений, но ничего о векторных формах.

Я преуспел в расширении и разрушении SVG-полигонов с помощью Shapely (http://toblerity.github.com/shapely/manual.html ) в Python, посылая точки пути с помощью Ajax-вызова в PHP-скрипт, который делает system () вызовом Python-скрипта, но этот метод медленный и требует от сервера выполнения той работы, которая может быть выполнена на стороне клиента.

Это мой код расширения и размытия в Python (как вы видите, он довольно короткий):

#!/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)

Также найдите этот документ, который пытается определить расширение и размывание в математических терминах: http://en.wikipedia.org/wiki/Mathematical_morphology

Есть предложение «Основная идея в двоичной морфологии состоит в том, чтобы исследовать изображение с простой, заранее определенной формой, делая выводы о том, как эта форма соответствует или не соответствует форме на изображении. Этот простой «зонд» называется структурирующим элементом и сам является двоичным изображением (то есть подмножеством пространства или сетки). & quot;

Я предполагаю, что этот метод может быть использован в морфинге векторных фигур, но как ...

РЕДАКТИРОВАТЬ: Один комментарий в ответе поднял возможную проблему использования фильтров вместо создания новой геометрии: если кто-то хочет добавить маркеры перетаскивания к точкам многоугольника, тогда маркеры перетаскивания могут оказаться в неправильном месте. Это может быть приемлемо, потому что тогда создается впечатление, что исходные данные пути не затрагиваются, что на самом деле имеет место в фильтрах, но - после дальнейшего тестирования - доказано, что качество является более серьезной проблемой. В соответствии сэтот а такжеэтот Фильтр SVG использует пиксельное представление векторного графического объекта вместо самих данных пути, что приводит кне очень хорошие результаты.

РЕДАКТИРОВАТЬ 2: ВОЗМОЖНОЕ ВОЗМОЖНОЕ РЕШЕНИЕ: один из ответов на этой странице привел меня к использованию обводок и маски переменной ширины, чтобы добиться хорошего решения этой проблемы. Я сделал несколько тестов и получил реализациюэффект смещения пути в стиле Adobe Illustrator.