SVGが正しく動作しないgetPointAtLength

Question

私は巨大なSVGファイルを持っており、そのデータはすべて1つの要素に入っています。それはこのようなものです：この男は私の質問に答えとして、私は、関数を使用してポリラインに「getPointAtLengthを」この巨大なSVGに変換しています

<path d="M724 1541c133,-400 36,-222 334,-520 76,-75 440,-37 557,-37 145,291 111, 
    -32 111,445 0,344 -3,260 483,260 457,0 177,-111 409,-111 0,-62 0,-124 0,-186 
    -368,0 190,-111 -409,-111 -143,0 2,40 -148,223 ... huge SVG "/> 

：https://stackoverflow.com/a/39405746/2934699

問題はこれです：このSVGは、連続的なものではありません、それは接続されていないいくつかの形（四角形、円...）を持っています。しかし、上記のリンクの方法を使用すると、すべての形が接続されます。この問題を解決する方法はありますか？

Answer 1

あなたの問題を解決するために考えられる2つのアプローチがあります。

1.クイックパスを通してあなたループとして

汚れは、最後のパスの点からの距離を計算します。その距離がある限界を超える場合は、新しいサブパスに入ったとみなすことができます。新しいポリラインを始める。

2.より正確なが、トリッキー

前処理を行いmypath.pathSegListプロパティを使用してパス。その呼び出しは、パス内のパスコマンドのリストを返します。

1. 次に、pathSegListをループし、それぞれの移動コマンドがどこにあるかをメモします。これらは、各サブパスの先頭にマークを付けます。
2. パスの平坦化をループスルーするときは、mypath.getPathSegAtLength()関数を呼び出します。その長さのpathsegエントリのインデックスを返します。
3. 合併症がChromeが持っているということですワン

新しいポリライン（またはポリゴン）を起動し、データをあなたが持っている場合は、新しいサブパス

に移動しているかどうかを確認するために、手順1で記録した比較pathSegListプロパティのサポートが廃止されました。代わりに、これのための新しいSVG2 API（mypath.getPathData()）に移動しました。幸いにも、古いAPIのサポートを追加するためのChrome用のポリフィルがあります。または、新しいAPIに切り替えて別のポリフィルを使用して、新しいAPIが古いブラウザで動作するようにすることもできます。

You can find details on the two polyfills here