javascript - 2 つの svg パス要素をプログラムでマージする

Question

SVG パスからマップをレンダリングしています ( jVectormapを使用)。

1 つのリージョンを隣接するリージョンとマージする必要がある場合があります。

残念ながら、両方の領域が互いに接触していないため、その間のスペースを埋めるために補間する必要があります。

jVectormap は、非常に単純な SVG パスを使用しMて、絶対開始点を設定し、l相対点を接続します。

そのような操作をカバーする SVG ライブラリはありますか?

Answer 1

これはあなたが求めている答えではないかもしれませんが、Raphael.js を使用すると、1 つの region のパス全体をループしてgetPointAtLength()、2 番目の region のすべてのポイントと比較することができます。座標が 2 番目の領域のどの座標からのピクセルよりも近くn、前の座標がそうでなかった場合、それは「接着」ポイントと見なすことができます。次に、2 番目のレジオにジャンプしてループを開始します。次のポイントがまだnポイントよりも近い場合は反対方向に移動し、さらに近い場合は方向を変えてパスに沿ってさらに遠くにあるポイントを見つけるまで進みます。よりも元の地域nピクセル。新しい「グルー」ポイントが見つかるまで、その方向にループを続けます。ここで、説明した方法で元のリージョンにもう一度切り替え、この最後のループでカバーされなかったすべてのポイントを破棄できます (または単に元の領域の長さをループしながら、遭遇したポイントに基づいて新しい形状を作成します。

確かに、作成するのが最も簡単なスクリプトではありませんが、特にgetPointAtLength、定義された svg ポイント間のポイントを見つけるような関数を使用できる場合は、非常に実行可能であると思います (ただし、定義されたポイントを「記録」するだけで済みます)。 Raphael.js にはこれを支援する機能がまったくないため、これは一種の困難な道のりです。それでも、手作業で(もちろんコードで) 一致させるのはそれほど難しくありません)。