<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>page</title>
<style>
html,body{
height:100%;
margin:0;
}
#svg1{
width:100%;
height:100%;
}
body{
background:grey;
}
#div1{
position:absolute;
top:0;
right:0;
font-family:sans-serif;
font-size:16px;
}
</style>
</head>
<body>
<svg id="svg1">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJiRf5nzeWZrGx8ccxz3HkNwzfJ6EiaEf8plv9EyN6G2lzHd1ptLraFvP5FPy2VIarDFbGw3ZGF4-6rIaRLckNxpcriCRn4vWWxSeAvccuUOYp38HaWLwDliigfT_Hj7TOYQC5Nqt0Fo/s1600/pumpkin50.gif" width="50px" height="60px" id="cit"/>
</svg>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var cit=document.getElementById("cit");
var mx=Math.round(ww/2);
var my=Math.round(wh/2);
var cx=Math.round(ww/2)-25;
var cy=Math.round(wh/2)-30;
cit.setAttribute("x",cx);
cit.setAttribute("y",cy);
function Mmov(e){
mx=e.clientX;
my=e.clientY;
div1.innerHTML=ww+" "+wh+"<br>"+mx+" "+my+"<br>"+cx+" "+cy;
}
document.body.onmousemove=Mmov;
function Cmov(){
if(cx+25<mx){cx++};
if(cx+25>mx){cx--};
if(cy+30<my){cy++};
if(cy+30>my){cy--};
cit.setAttribute("x",cx);
cit.setAttribute("y",cy);
}
setInterval(Cmov,10);
function Ceat(){
}
</script>
</body>
</html>
