HTML SVG 地图图像跟随路径答案

【问题标题】：HTML SVG map image follow pathHTML SVG 地图图像跟随路径
【发布时间】：2016-09-20 11:57:29
【问题描述】：

我目前有一个 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();

但是，由于我只查看 500x500 像素的地图，动画道路很快就超出了边界。我目前正在尝试做的是让 Image 元素移动到正确的位置，以便在动画时“跟随”道路。

我想我需要用 path.getPointAtLength(length) 做一些事情，然后用类似的东西转换图像：

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

但我不完全确定如何计算插入的坐标

【问题讨论】：

标签： html svg transform

【解决方案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)+")");

【讨论】：

正确。非常感谢