根据相对鼠标悬停距离更改比例？

Question

我希望当鼠标徘徊在靠近物体时，比例增加，最大比例应该是鼠标悬停在中心上方。我怎么能用Javascript做到这一点？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

你的意思是这样吗？

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;