предполагаю что необходимо создать массив с left и top для hover и для svgElement. После отслеживать через addEventListener местоположение и при необходимости заменять left и top. как это реализовать ??? спасибо за помощь.
const svgElement = document.getElementById('svg');
svgElement.addEventListener("mousemove", gomouse);
function gomouse(e) {
document.addEventListener('mousemove', e => {
var x = e.pageX;
var y = e.pageY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
});
}
body {
background: url([url]https://frontdevhero.pl/api/assets/thunder.png[/url]) no-repeat top center;
}
img {
position: absolute;
left: 55px;
top: 202px;
width: 35px;
transition-duration: 10s;
}
img:hover {
left: 289px;
top: 265px;
}
<body>
<div>
<img id="svg"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Wikiexpedition_logo.svg/1200px-Wikiexpedition_logo.svg.png"
alt="">
</div>
<p id="demo"></p>
</body>
https://codepen.io/Fed72/pen/dypNJQN