相対的なマウスのホバー距離に基づいてスケールを変更しますか？

Question

マウスがオブジェクトに近づくにつれてスケールが増加し、マウスが中心の上を移動するときに最大スケールが必要になります。 Javascriptを使ってどうすればいいですか？

function myFunction() { 
 
    document.getElementsByTagName("circle")[0].setAttribute("r", "100"); 
 
}

svg { 
 
    border-style: solid; 
 
    border-color: black; 
 
    background-color: white; 
 
}

<svg> 
 
<circle cx="145" cy="80" r="40" fill="red" onmouseover="myFunction()"/> 
 
</svg> 
 

 
<p> 
 
    Move mouse closer to circle to increase size 
 
</p>

https://jsfiddle.net/tahirjuba/2r5ufd8z/7/

Answer 1

あなたはこのような何かを意味していますか？

var circle = document.getElementById("circle"); 
 

 
function myFunction(evt) { 
 
    var r = Math.abs(evt.x - parseInt(evt.target.getAttribute('cx'), 10)) + Math.abs(evt.y - parseInt(evt.target.getAttribute('cy'), 10)); 
 
    r += 10; 
 
    document.getElementsByTagName("circle")[0].setAttribute("r", r); 
 
}

svg { 
 
    border-style: solid; 
 
    border-color: black; 
 
    background-color: white; 
 
}

<svg> 
 
<circle id="circle" cx="145" cy="80" r="40" fill="red" onmousemove="myFunction(evt)"/> 
 
</svg> 
 

 
<p> 
 
    Move mouse closer to circle to increase size 
 
</p>