javascriptsvgjquery-svg

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


I created a frame with an svg background (of a fantasy city). When I move over the buildings with the mouse they become red and if I click them I open a bubble with some information. Now this city need people moving along the street.

Now the problem is that the people are moving along the svg path but if I resize the window the path isn't resizing but stay fixed.

I'm using var SVGPath.getTotalLength(); to get the total length of the path, then inside a jQuery $.each() loop I get the coordinates of the point

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

I don't understand where I'm wrong.

Here the CodePen with the code http://codepen.io/Angussimons/full/oZmNer/


Solution

  • Ok, I found the solution. I'm posting here if someone else has the same problem.

    The original size of the svg was 1920x1080.

    So the solution to find the new X and Y adapted to the window size:

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

    To get the window size I used jQuery .width() & .height() as follow:

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