HTML SVGマップ画像パスに従う

Question

私は現在、HTML形式のSVGファイルを持っています。

SVGとビューボックスは500x500です。私は2500x2500のImage要素を持っています（大きな地図）。

Illustratorでは、マップ上の道路をたどるパスを作成しました。

<svg width="500px" height="500px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve"> 
    <image transform="translate(-430 -830)" id="mapImage" style="overflow:visible;" width="2562" height="2682" xlink:href="map.png" /> 
    <path transform="translate(-430 -830)" id="roadPath" d="M581.7,1030l..............."/> 
</svg> 

は私が成功し、次を使用してアニメーション化する「道路・パス」を持っている：

var distancePerPoint = 1; 
    var drawFPS   = 60; 

    var orig = document.querySelector('path'), length, timer; 

    function startDrawingPath(){ 
     length = 0; 
     orig.style.stroke = '#f60'; 
     timer = setInterval(increaseLength,1000/drawFPS); 
    } 

    function increaseLength(){ 
     var pathLength = orig.getTotalLength(); 
     length += distancePerPoint; 
     orig.style.strokeDasharray = [length,pathLength].join(' '); 
     if (length >= pathLength) clearInterval(timer); 
    } 

    startDrawingPath(); 

しかし、私は唯一のアニメーションの道路はかなり迅速に境界の外に出たマップの500x500pxを表示していますので、 。私が現在しようとしているのは、Image要素を正しい位置に移動させてアニメーション化するときに道路を「追跡」することです。

私はpath.getPointAtLength（長さ）で何かをする必要があると思うし、その後のようなもので画像を変換：

document.getElementById("mapImage").setAttribute("transform", "translate(??,??)"); 

が、私はに座標をうまくする方法が全くわからないんだけどプラグイン

Answer 1

これは、パス開始座標（つまり、長さ= 0）と現在のパス座標の差にすぎません。しかし否定された。

var pathStart = path.getPointAtLength(0); 

// Then as you move along the path... 
var currentPoint = path.getPointAtLength(length); 
var diffX = currentPoint.x - pathStart.x; 
var diffY = currentPoint.y - pathStart.y; 
document.getElementById("mapImage").setAttribute("transform", "translate("+(-diffX)+","+(-diffY)+")");