Svgオブジェクトがラインパスに沿って移動し、ウィンドウでサイズ変更

（ファンタジー都市の）背景を持つフレームを作成しました。マウスで建物を移動すると赤くなり、クリックするとバブルが開き、いくつかの情報が表示されます。この街には、通りに沿って移動する人が必要です。Svgオブジェクトがラインパスに沿って移動し、ウィンドウでサイズ変更

問題は人々がsvgパスに沿って移動していることですが、ウィンドウのサイズを変更するとパスのサイズは変更されませんが固定されたままになります。

私は、jQueryの$.each()ループ内で私は私が間違っているところ、私は理解していない点の座標

var point = Path.getPointAtLength(v); 
    var x = point.x; 
    var y = point.y;

を取得し、パスの長さの合計を取得するためにVAR SVGPath.getTotalLength();を使用しています。ここでCodePen http://codepen.io/Angussimons/full/oZmNer/

をどのような座標系でのあなたはポジションが必要ですか？ SVGでは？あなたのページに？あるものから別のものに変換したり（getCTMをチェックする）、変換行列を適用する必要があるかもしれません。 – jcaron

OKコードと

は、私は解決策を見つけました。他の人が同じ問題を抱えている場合は、私はここに投稿しています。

svgの元のサイズは1920x1080でした。

ので、新しいXとYを見つけるための解決策は、ウィンドウのサイズに適合：

var x = (point.x * w)/1920; 
var y = (point.y * h)/1080;

を私は次のようにjQueryの.width() & .height()を使用し、ウィンドウサイズを取得するには：

var w = $(window).width(); 
var h = $(window).height();

2017-04-01 13:43:02

答えて