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元素移动到正确的位置，以便＆＃34;关注＆＃34;它动起来的道路。

我想我需要使用path.getPointAtLength（length）做一些事情然后用以下内容转换Image：

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)+")");

HTML SVG地图图像遵循路径

1 个答案: