I am trying to do a motion path of an image, that will jump from 1 SVG to another, following all paths.
The image is a normal
What I want is to move the image to a specific point, on any svg I have in my document.
If I add my image inside a SVG (using svg image) and move it, it’s easy, I just use:
var temp_point=temp_path.getPointAtLength(temp_distance);
$('.handz').css("transform","translateX("+temp_point.x+"px) translateY("+temp_point.y+"px) rotate("+deg+"deg)");
But since I want to have my image outside the svg, and have 1 single image, that can be moved to any point on any path, from any svg from my document, I can’t seem to figure it out.
I tried using:
function getRelativeXY(x, y, svg, element){
var xx=element.getBoundingClientRect().x+x;
var yy=element.getBoundingClientRect().y+y;
return {x:xx,y:yy}
}
But it does not give me the desired results, as it does not move precisely where it should move. I think (I am not sure) it has something to do if the original svg has scaling/transforms applied, or different view box details.