Tengo un patrón de cuadrícula SVG que se ve así
// positioned at 0, 0 (relative to the browser's viewport) and takes 100% of the screen's width and height <svg width="100%" height="100%"> <defs> <pattern id="pattern" patternUnits="userSpaceOnUse" x={0} y={0} width={50} height={50} > <rect x={0} y={0} height={5} width={5} fill={"blue"} /> </pattern> </defs> <rect width="100%" height="100%" x={0} y={0} fill={"url(#pattern)"} /> </svg>Esta es mi implementación de zoom con errores. La lógica detrás de esto se describe aquí, en otra pregunta de stackoverflow
let scale = 1; const transform = { x: 0, y: 0, }; const scaleFactor = 0.1; svg.onwheel = (event) => { // Normalize mouse wheel movement to +1 or -1 to avoid unusual jumps. const wheel = event.deltaY < 0 ? 1 : -1; const newScale = scale + wheel * scaleFactor; const scaleChange = newScale - scale; const offsetX = event.clientX * scaleChange; const offsetY = event.clientY * scaleChange; transform.x -= offsetX; transform.y -= offsetY; pattern.setAttribute("x", transform.x.toString()); pattern.setAttribute("y", transform.y.toString()); pattern.setAttribute("width", (50 * newScale).toString()); pattern.setAttribute("height", (50 * newScale).toString()); scale = newScale; };Solo funciona correctamente cuando hago zoom hacia arriba y hacia abajo en el mismo punto (sin mover el mouse). Cuando hago zoom en la posición del mouse (10, 10) y hago zoom en la posición del mouse (20, 20) se ve mal y no puedo entender por qué
Aquí hay una caja de arena de código con el ejemplo mínimo reproducible