Svg 对象沿直线路径移动并使用 window 调整大小

Question

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

现在的问题是人们正在沿着 svg 路径移动，但是如果我调整 window 路径的大小并没有调整，而是保持不变。

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

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

我不明白我哪里错了。

的 CodePen

Answer 1

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

svg 的原始尺寸为 1920x1080。

因此找到适应 window 大小的新 X 和 Y 的解决方案：

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

为了获得 window 尺寸，我使用 jQuery .width() & .height() 如下：

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

Svg Object moving along a line path and resizing with the window