編集：
クリッパー ライブラリを使用して新しいジオメトリが作成されるように、ポリゴンを浸食して拡張する (オフセットする) 方法を最終的に見つけました: https://sourceforge.net/projects/jsclipper/
Javascript Clipper のライブ デモ: http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html
クリッパーは多角形または複数多角形 (穴のある多角形など) のみを処理できるため、SVG 形式の他のグラフィック オブジェクトを処理するには、それらを直線に変換する必要があります。少なくともパスはpath.getTotalLength()、 and path.getPointAtLength()( http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/ )を使用して線に変換するのがかなり簡単です。
もう1つの可能性は、このようなテクニックを使用することです(新しいジオメトリを作成しません): https://stackoverflow.com/a/12723835/1691517
Javascriptを介してSVGの形状を浸食および拡張する方法はありますか?
次の SVG の例があります: http://jsfiddle.net/timo2012/2S4Kt/1/
青がオリジナル、緑が浸食（細くなった）、赤が膨張（太字）された3つの形があります。イラストレーターで作成しています。
侵食フィルターと拡張フィルターをテストしましたが、効果はあまり良くありません: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg
インターネットで数時間検索した後、ビットマップ画像の浸食と膨張に関する例しか見つかりませんでしたが、ベクトル形状に関するものは何も見つかりませんでした.
Python でShapely ( http://toblerity.github.com/shapely/manual.html )を使用して SVG ポリゴンを拡張および浸食することに成功しましたただし、この方法は遅く、クライアント側で実行できる作業をサーバーが実行する必要があります。
これは、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
「バイナリ モルフォロジーの基本的な考え方は、単純な事前定義された形状で画像をプローブし、この形状が画像内の形状にどのように適合するか、または適合しないかについて結論を導き出すことです。この単純な「プローブ」は構造化要素と呼ばれます。そして、それ自体がバイナリ イメージ (つまり、空間またはグリッドのサブセット) です。」
この方法はベクトル形状のモーフィングに使用できると思いますが、どのように...
編集:返信の1つのコメントは、新しいジオメトリを作成する代わりにフィルターを使用するという問題を提起しました:誰かがポリゴンポイントにドラッグハンドルを追加したい場合、ドラッグハンドルが間違った場所にあるように見えるかもしれません. 元のパス データは変更されていないという印象があるため、これは許容できますが、これはフィルターの場合に実際に当てはまりますが、さらにテストした結果、品質がより大きな問題であることが判明しました。thisおよびthis SVG フィルターによると、パス データ自体の代わりにベクター グラフィック オブジェクトのピクセル表現を使用するため、あまり見栄えの悪い結果が得られます。
EDIT2: 考えられる回避策: このページの回答の 1 つにより、可変幅のストロークとマスクを使用して、この問題に対する見栄えの良い回避策を実現することができました。私はいくつかのテストを行い、Adobe Illustrator のような Offset Path Effectを実装しました。