Estoy tratando de cambiar el tamaño del rectángulo dentro del SVG usando eventos del mouse. Actualmente, estoy trabajando en el borde inferior derecho, para eso, creé otra forma de círculo y estoy aplicando eventos en esa forma para cambiar el tamaño del rectángulo. No sé por qué cuando empiezo a cambiar el tamaño primero se vuelve pequeño y luego comienza a cambiar el tamaño.
const min = 54; let initialWidth = 0, initialHeight = 0, mouseX = 0, mouseY = 0; rightBottomCorner.addEventListener('mousedown', function(evt: any) { getMousePositions(evt); getElementDimensions(); evt.stopPropagation(); window.addEventListener('mousemove', scale); window.addEventListener('mouseup', removeScale); }); function getMousePositions(evt: any) { mouseX = evt.pageX; mouseY = evt.pageY; } function getElementDimensions() { selectedRect = rect; initialWidth = selectedRect.clientWidth; initialHeight = selectedRect.clientHeight; } function scale(evt: any) { selectedRect = rect; const width = initialWidth + (evt.pageX - mouseX); const height = initialHeight + (evt.pageY - mouseY); if (width > min) { selectedRect.setAttributeNS(null, 'width', width as unknown as string); } if (height > min) { selectedRect.setAttributeNS(null, 'height', height as unknown as string); } } function removeScale() { window.removeEventListener('mousemove', scale); }Está pasando las funciones a addEventlistener antes de que se definan. Tiene que mover la función rightBottomCorner.addEventListener debajo de su función removeScale . Entonces el cambio de tamaño funciona.