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

【问题标题】：Svg Object moving along a line path and resizing with the windowSvg 对象沿线路径移动并随窗口调整大小
【发布时间】：2017-04-01 21:43:02
【问题描述】：

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

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

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

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

我不明白我错在哪里。

【问题讨论】：

【解决方案1】：

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

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();

【讨论】：