My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which should not happen. This issue becomes apparent when the cursor is inside the circle or near its perimeter. Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" content="width=device-width">
<style>
.container
{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<svg id="svg" height="600" width="600">
<circle cx="300" cy="300" r="300" stroke="black" stroke-width="3" fill="white"/>
</svg>
</div>
<script>
let scale = 1;
const e = document.getElementById("svg");
function wheelZoom(event)
{
event.preventDefault();
scale += event.deltaY * -0.01;
scale = Math.min(Math.max(.5, scale), 2);
x = 100*(event.clientX-e.getBoundingClientRect().x)/e.getBoundingClientRect().width;
y = 100*(event.clientY-e.getBoundingClientRect().y)/e.getBoundingClientRect().height;
e.style.transformOrigin = `${x}% ${y}%`;
e.style.transform = `scale(${scale})`;
}
e.addEventListener("wheel", wheelZoom);
</script>
</body>
</html>