How To Use Requestanimationframe In Mousemove Event?

In my SVG based web application, a user can select a large number of shapes (even 800 or more) & move them about on the screen, which as one can imagine severely impacts the fr

Solution 1:

Basically, you'd need to move the draggroup.setAttribute() calls to another function. Since you only need to animate when the mouse is down, add another variable to indicate whether you're dragging or not, and only call requestAnimationFrame when that's the case.

var isDragging = false;
function update() { // New functionif (isDragging) {
    requestAnimationFrame(update); // Call self again, if still dragging
  }
  draggroup.setAttribute('transform', 'translate(' + dx + ',' + dy + ')');
}
function mousedown(event) {
  if (event.target.id === 'selectionrect') {
    isDragging = true;
    requestAnimationFrame(update); // Start animation loop// existing logic here...
  }
}
function mouseup() {
  isDragging = false;
  // existing logic here...
}

You're already storing the updated location for the group (dx, dy) in a separate variable, so remove the draggroup.setAttribute() call from mousemove() and add the above modifications, and you should be good!