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