How to manipulate an svg depending on mouse position?

Question

I have an SVG eye image. And I want to animate iris and the pupil to move around eyeball according to mouse position. I have already this:

SVG in html:

const leftPupil = document.getElementById("left-pupil");
document.addEventListener("mousemove", function(e){
    let x = e.clientX;
    let y = e.clientY;
    leftPupil.setAttribute('transform', `translate(-${x},-${y})`);
});

and the pupil is moving, but I don't know how to make it move only on the specific field (an eyeball).

user_8508777 · Answer

You already use transform on the path for the initial placement. suggest to wrap it in g and move the transform there.
You can determine the angle from pointer to eyeball using atan2 and then use unit circle to set the right transform

const leftPupil = document.getElementById("left-pupil");
document.addEventListener("mousemove", function(e){
    let x = e.clientX;
    let y = e.clientY;
    const pupilRect = leftPupil.getBoundingClientRect();
    const radius = 8;
    const angle = Math.atan2(y-pupilRect.top,x-pupilRect.left)+Math.PI;
    leftPupil.setAttribute('transform', `translate(${-radius*Math.cos(angle)},${-radius*Math.sin(angle)})`);
});

user_7332947 · Answer

you need to offset from the center https://codepen.io/NourimoS/pen/ZEBgXOY take a look at this pen

const Pupil = document.getElementById("pupil");
const Pupil2 = document.getElementById("pupil2");
const svg = document.querySelector("svg");
const { x, y, width, height } = svg.getBBox();
const cx = width / 2,
      cy = height / 2;
document.addEventListener("mousemove", function ({ clientX: x, clientY: y }) {
const tx = ((cx - x) / cx) * 200,
    ty = ((cy - y) / cy) * 100;
    pupil.setAttribute("transform", `translate(${tx},${ty})`);
    pupil2.setAttribute("transform", `translate(${tx * 0.8},${ty * 0.8})`);
});

How to manipulate an svg depending on mouse position?

2 Answers