javascript - Change scale based on relative mouse hover distance? -
i want scale increase mouse hovers closer object, , max scale should when mouse hovers on center. how can using 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 circle increase size </p>
do mean this?
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 circle increase size </p>
Comments
Post a Comment