鼠标滚轮放大算法

const imageEl = document.getElementById("image");

image.addEventListener("mousewheel", (event) => {
  const el = event.target;
  const match = (el.style.transform || "").match(/[\d.]+/);
  const curr = (match && +match[0]) || 1;
  const diff = (-event.deltaY)/3000;
  el.style.transform = `scale(${diff + curr})`;
  el.style.transformOrigin = `${event.offsetX}px ${event.offsetY}px`;
})

img {
  width: 200px;
  height: 200px;
  margin: 20px;
}

<img id ="image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDguNzg4IDQwOC43ODgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwOC43ODggNDA4Ljc4ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiM0NzU5OTM7IiBkPSJNMzUzLjcwMSwwSDU1LjA4N0MyNC42NjUsMCwwLjAwMiwyNC42NjIsMC4wMDIsNTUuMDg1djI5OC42MTZjMCwzMC40MjMsMjQuNjYyLDU1LjA4NSw1NS4wODUsNTUuMDg1aDE0Ny4yNzVsMC4yNTEtMTQ2LjA3OGgtMzcuOTUxYy00LjkzMiwwLTguOTM1LTMuOTg4LTguOTU0LTguOTJsLTAuMTgyLTQ3LjA4N2MtMC4wMTktNC45NTksMy45OTYtOC45ODksOC45NTUtOC45ODloMzcuODgydi00NS40OThjMC01Mi44LDMyLjI0Ny04MS41NSw3OS4zNDgtODEuNTVoMzguNjVjNC45NDUsMCw4Ljk1NSw0LjAwOSw4Ljk1NSw4Ljk1NXYzOS43MDRjMCw0Ljk0NC00LjAwNyw4Ljk1Mi04Ljk1LDguOTU1bC0yMy43MTksMC4wMTFjLTI1LjYxNSwwLTMwLjU3NSwxMi4xNzItMzAuNTc1LDMwLjAzNXYzOS4zODloNTYuMjg1YzUuMzYzLDAsOS41MjQsNC42ODMsOC44OTIsMTAuMDA5bC01LjU4MSw0Ny4wODdjLTAuNTM0LDQuNTA2LTQuMzU1LDcuOTAxLTguODkyLDcuOTAxaC01MC40NTNsLTAuMjUxLDE0Ni4wNzhoODcuNjMxYzMwLjQyMiwwLDU1LjA4NC0yNC42NjIsNTUuMDg0LTU1LjA4NFY1NS4wODVDNDA4Ljc4NiwyNC42NjIsMzg0LjEyNCwwLDM1My43MDEsMHoiLz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=" />