Svg对象沿着直线路径移动并随窗口调整大小

Question

我创建了一个带有svg背景（幻想城市）的框架。当我用鼠标移动建筑物时，它们会变成红色，如果我点击它们，我会打开一个带有一些信息的气泡。 现在这个城市需要人们沿着街道移动。

现在的问题是人们沿着svg路径移动但是如果我调整窗口大小，路径不会调整大小但保持固定。

我使用var SVGPath.getTotalLength();来获取路径的总长度，然后在jQuery $.each()循环中获取点的坐标

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

我不明白我错在哪里。

此处CodePen的代码为http://codepen.io/Angussimons/full/oZmNer/

Answer 1

好的，我找到了解决方案。 如果其他人遇到同样的问题，我会在这里发帖。

svg的原始尺寸是1920x1080。

因此找到适合窗口大小的新X和Y的解决方案：

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

为了获得窗口大小，我使用了jQuery .width()＆amp; .height()如下：

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