Mouse event mismatch due to resizing the svg element

Question

I have a set of svg elements that I animate on mousemove event. Everything works fine if the svg element is original size,i.e., same as the viewBox.

HTML:

...

CSS:

svg {
  width: 550px;
  height: 550px;
}

Code Snippet:

var svg = document.querySelector('#svg-logo'),
    ticks = document.querySelectorAll('.tick'),
    marker = document.querySelector('#marker'),
    defPos = [0, -5, -20, -50, -20, -5, 0],
    precentage = [0, 10, 40, 100, 40, 10, 0],
    snapTheta = [0, 9, 18, 27, 18, 9, 0],
    calcPos = new Array(),
    range = 27,
    currRange = new Array(),
    frag = 360 / ticks.length,
    offset = 55,
    i = 0,
    r = 220,
    center = 275,
    posX,
    posY,
    mouseX,
    mouseY,
    logoX = svg.getBoundingClientRect().left,
    logoY = svg.getBoundingClientRect().top,
    relTheta,
    absTheta,
    quad;

function defaultPosition() {
  resetPosition();
  for (var i = 1; i < 6; i++) {
    ticks[i].setAttribute('transform', ticks[i].getAttribute('transform') + ' translate(0, ' + defPos[i-1] + ')');
  }
}

function resetPosition() {
  ticks.forEach(function(el, _) {
    var v = el.getAttribute('transform');
    var reg = /\stranslate$0\,\s?\-\d+\.?\d*$/g;
    el.setAttribute('transform', el.getAttribute('transform').replace(reg, ''))
  });
}

function findQuadrant(x, y) {
  quad = (x > center && y <= center) ? 1 : (x >= center && y > center) ? 2 : (x < center && y >= center) ? 3 : 4;
}

function calculateRange() {
  var n,
      positions = new Array();
  currRange.push((absTheta < range) ? 360 + (absTheta - range) : (absTheta - range));
  currRange.push((absTheta > (360 - range)) ? range - (360 - absTheta) : absTheta + range);
}

function calculatePosition(a) {
  var tickTheta, pos, diff = new Array(), difference;
  calcPos = [];
  difference = -(absTheta - (frag * a[3]));
  difference = (difference == -360) ? 0 : (difference < -333) ? -(360 + difference) : -difference;
  for (var i = 0; i < a.length; i++) {
    calcPos[i] = (i == 0 || i == a.length - 1) ? 0 : ((snapTheta[i] - Math.abs(difference)) * defPos[i]) / snapTheta[i]
  }
}

function applyTransform() {
  var prev1, next1, prev2, next2, prev3, next3, currTickIndexes;
  calculateRange();
  n = Math.round(absTheta / frag);
  n = (n == 40) ? 0 : n
  ticks.forEach(function(el, _) {
    el.setAttribute('fill', '#000')
  });
  prev1 = (n == 0) ? ticks.length - 1 : n - 1;
  next1 = (n == ticks.length - 1) ? 0 : n + 1;
  prev2 = (n == 0) ? ticks.length - 2 : (n == 1) ? ticks.length - 1 : n - 2;
  next2 = (n == ticks.length - 2) ? 0 : (n == ticks.length - 1) ? next1 + 1 : n + 2;
  prev3 = (n == 0) ? ticks.length - 3 : (n == 1) ? ticks.length - 2 : (n == 2) ? ticks.length - 1 : n - 3;
  next3 = (n == ticks.length - 2) ? 1 : (n == ticks.length - 1) ? next2 + 1 : (n == ticks.length - 2) ? next2 + 1 : n + 3;
  currTickIndexes = [prev3, prev2, prev1, n, next1, next2, next3]
  calculatePosition(currTickIndexes);
  resetPosition();
  ticks[n].setAttribute('transform', ticks[n].getAttribute('transform') + ' translate(0, ' + Math.min(...calcPos) + ')');
  ticks[prev1].setAttribute('transform', ticks[prev1].getAttribute('transform') + ' translate(0, ' + calcPos[2] + ')');
  ticks[next1].setAttribute('transform', ticks[next1].getAttribute('transform') + ' translate(0, ' + calcPos[4] + ')');
  ticks[prev2].setAttribute('transform', ticks[prev2].getAttribute('transform') + ' translate(0, ' + calcPos[1] + ')');
  ticks[next2].setAttribute('transform', ticks[next2].getAttribute('transform') + ' translate(0, ' + calcPos[5] + ')');
  ticks[prev3].setAttribute('transform', ticks[prev3].getAttribute('transform') + ' translate(0, ' + calcPos[0] + ')');
  ticks[next3].setAttribute('transform', ticks[next3].getAttribute('transform') + ' translate(0, ' + calcPos[6] + ')');
}

svg.addEventListener('mousemove', function(e) {
  resetPosition();
  mouseX = e.clientX - logoX;
  mouseY = e.clientY - logoY;
  findQuadrant(mouseX, mouseY);
  posX = (mouseX > center) ? mouseX - center : (mouseX == center) ? mouseX - offset - r : -(mouseX - offset - r);
  posY = (mouseY > center) ? mouseY - center : -(mouseY - offset - r);
  relTheta = Math.atan(posY/posX) * (180/Math.PI);
  absTheta = (quad == 1) ? 90 - relTheta : (quad == 2) ? 90 + relTheta : (quad == 3) ? 180 + (90 - relTheta) : 270 + relTheta;
  applyTransform();
});

svg.addEventListener('mouseleave', function() {
  defaultPosition();
});

body {
  margin: 0;
}
svg {
  width: 550px;
  height: 550px;
  background: #f00;
}

However, when I resize the svg, the mouse event is out of place.

CSS:

svg {
  width: 450px;
  height: 450px;
}

Code Snippet:

var svg = document.querySelector('#svg-logo'),
    ticks = document.querySelectorAll('.tick'),
    marker = document.querySelector('#marker'),
    defPos = [0, -5, -20, -50, -20, -5, 0],
    precentage = [0, 10, 40, 100, 40, 10, 0],
    snapTheta = [0, 9, 18, 27, 18, 9, 0],
    calcPos = new Array(),
    range = 27,
    currRange = new Array(),
    frag = 360 / ticks.length,
    offset = 55,
    i = 0,
    r = 220,
    center = 275,
    posX,
    posY,
    mouseX,
    mouseY,
    logoX = svg.getBoundingClientRect().left,
    logoY = svg.getBoundingClientRect().top,
    relTheta,
    absTheta,
    quad;

function defaultPosition() {
  resetPosition();
  for (var i = 1; i < 6; i++) {
    ticks[i].setAttribute('transform', ticks[i].getAttribute('transform') + ' translate(0, ' + defPos[i-1] + ')');
  }
}

function resetPosition() {
  ticks.forEach(function(el, _) {
    var v = el.getAttribute('transform');
    var reg = /\stranslate$0\,\s?\-\d+\.?\d*$/g;
    el.setAttribute('transform', el.getAttribute('transform').replace(reg, ''))
  });
}

function findQuadrant(x, y) {
  quad = (x > center && y <= center) ? 1 : (x >= center && y > center) ? 2 : (x < center && y >= center) ? 3 : 4;
}

function calculateRange() {
  var n,
      positions = new Array();
  currRange.push((absTheta < range) ? 360 + (absTheta - range) : (absTheta - range));
  currRange.push((absTheta > (360 - range)) ? range - (360 - absTheta) : absTheta + range);
}

function calculatePosition(a) {
  var tickTheta, pos, diff = new Array(), difference;
  calcPos = [];
  difference = -(absTheta - (frag * a[3]));
  difference = (difference == -360) ? 0 : (difference < -333) ? -(360 + difference) : -difference;
  for (var i = 0; i < a.length; i++) {
    calcPos[i] = (i == 0 || i == a.length - 1) ? 0 : ((snapTheta[i] - Math.abs(difference)) * defPos[i]) / snapTheta[i]
  }
}

function applyTransform() {
  var prev1, next1, prev2, next2, prev3, next3, currTickIndexes;
  calculateRange();
  n = Math.round(absTheta / frag);
  n = (n == 40) ? 0 : n
  ticks.forEach(function(el, _) {
    el.setAttribute('fill', '#000')
  });
  prev1 = (n == 0) ? ticks.length - 1 : n - 1;
  next1 = (n == ticks.length - 1) ? 0 : n + 1;
  prev2 = (n == 0) ? ticks.length - 2 : (n == 1) ? ticks.length - 1 : n - 2;
  next2 = (n == ticks.length - 2) ? 0 : (n == ticks.length - 1) ? next1 + 1 : n + 2;
  prev3 = (n == 0) ? ticks.length - 3 : (n == 1) ? ticks.length - 2 : (n == 2) ? ticks.length - 1 : n - 3;
  next3 = (n == ticks.length - 2) ? 1 : (n == ticks.length - 1) ? next2 + 1 : (n == ticks.length - 2) ? next2 + 1 : n + 3;
  currTickIndexes = [prev3, prev2, prev1, n, next1, next2, next3]
  calculatePosition(currTickIndexes);
  resetPosition();
  ticks[n].setAttribute('transform', ticks[n].getAttribute('transform') + ' translate(0, ' + Math.min(...calcPos) + ')');
  ticks[prev1].setAttribute('transform', ticks[prev1].getAttribute('transform') + ' translate(0, ' + calcPos[2] + ')');
  ticks[next1].setAttribute('transform', ticks[next1].getAttribute('transform') + ' translate(0, ' + calcPos[4] + ')');
  ticks[prev2].setAttribute('transform', ticks[prev2].getAttribute('transform') + ' translate(0, ' + calcPos[1] + ')');
  ticks[next2].setAttribute('transform', ticks[next2].getAttribute('transform') + ' translate(0, ' + calcPos[5] + ')');
  ticks[prev3].setAttribute('transform', ticks[prev3].getAttribute('transform') + ' translate(0, ' + calcPos[0] + ')');
  ticks[next3].setAttribute('transform', ticks[next3].getAttribute('transform') + ' translate(0, ' + calcPos[6] + ')');
}

svg.addEventListener('mousemove', function(e) {
  resetPosition();
  mouseX = e.clientX - logoX;
  mouseY = e.clientY - logoY;
  findQuadrant(mouseX, mouseY);
  posX = (mouseX > center) ? mouseX - center : (mouseX == center) ? mouseX - offset - r : -(mouseX - offset - r);
  posY = (mouseY > center) ? mouseY - center : -(mouseY - offset - r);
  relTheta = Math.atan(posY/posX) * (180/Math.PI);
  absTheta = (quad == 1) ? 90 - relTheta : (quad == 2) ? 90 + relTheta : (quad == 3) ? 180 + (90 - relTheta) : 270 + relTheta;
  applyTransform();
});

svg.addEventListener('mouseleave', function() {
  defaultPosition();
});

body {
  margin: 0;
}
svg {
  width: 450px;
  height: 450px;
  background: #f00;
}

I understand this is caused by the mismatch from resizing. I tried scaling the mouse position according to the new width and height.

mouseX = (e.clientX - logoX) * (newW / origW);
mouseY = (e.clientY - logoY) * (newH / origH);

But it does not seem to work. How could I fix this issue? Any help would be appreciated.

enxaneta · Accepted Answer

I see you are using Math.atan instead of Math.atan2 and this is forcing you to find the quadrant and is complicating your code.

Next comes your code where I've added a function to detect the mouse position on a resized SVG canvas. I hope this is what you need.

var svg = document.querySelector('#svg-logo'),
    ticks = document.querySelectorAll('.tick'),
    marker = document.querySelector('#marker'),
    defPos = [0, -5, -20, -50, -20, -5, 0],
    precentage = [0, 10, 40, 100, 40, 10, 0],
    snapTheta = [0, 9, 18, 27, 18, 9, 0],
    calcPos = new Array(),
    range = 27,
    currRange = new Array(),
    frag = 360 / ticks.length,
    offset = 55,
    i = 0,
    r = 220,
    center = 275,
    posX,
    posY,
    mouseX,
    mouseY,
    logoX = svg.getBoundingClientRect().left,
    logoY = svg.getBoundingClientRect().top,
    relTheta,
    absTheta,
    quad;

function defaultPosition() {
  resetPosition();
  for (var i = 1; i < 6; i++) {
    ticks[i].setAttribute('transform', ticks[i].getAttribute('transform') + ' translate(0, ' + defPos[i-1] + ')');
  }
}

function resetPosition() {
  ticks.forEach(function(el, _) {
    var v = el.getAttribute('transform');
    var reg = /\stranslate$0\,\s?\-\d+\.?\d*$/g;
    el.setAttribute('transform', el.getAttribute('transform').replace(reg, ''))
  });
}

function findQuadrant(x, y) {
  quad = (x > center && y <= center) ? 1 : (x >= center && y > center) ? 2 : (x < center && y >= center) ? 3 : 4;
}

function calculateRange() {
  var n,
      positions = new Array();
  currRange.push((absTheta < range) ? 360 + (absTheta - range) : (absTheta - range));
  currRange.push((absTheta > (360 - range)) ? range - (360 - absTheta) : absTheta + range);
}

function calculatePosition(a) {
  var tickTheta, pos, diff = new Array(), difference;
  calcPos = [];
  difference = -(absTheta - (frag * a[3]));
  difference = (difference == -360) ? 0 : (difference < -333) ? -(360 + difference) : -difference;
  for (var i = 0; i < a.length; i++) {
    calcPos[i] = (i == 0 || i == a.length - 1) ? 0 : ((snapTheta[i] - Math.abs(difference)) * defPos[i]) / snapTheta[i]
  }
}

function applyTransform() {
  var prev1, next1, prev2, next2, prev3, next3, currTickIndexes;
  calculateRange();
  n = Math.round(absTheta / frag);
  n = (n == 40) ? 0 : n
  ticks.forEach(function(el, _) {
    el.setAttribute('fill', '#000')
  });
  prev1 = (n == 0) ? ticks.length - 1 : n - 1;
  next1 = (n == ticks.length - 1) ? 0 : n + 1;
  prev2 = (n == 0) ? ticks.length - 2 : (n == 1) ? ticks.length - 1 : n - 2;
  next2 = (n == ticks.length - 2) ? 0 : (n == ticks.length - 1) ? next1 + 1 : n + 2;
  prev3 = (n == 0) ? ticks.length - 3 : (n == 1) ? ticks.length - 2 : (n == 2) ? ticks.length - 1 : n - 3;
  next3 = (n == ticks.length - 2) ? 1 : (n == ticks.length - 1) ? next2 + 1 : (n == ticks.length - 2) ? next2 + 1 : n + 3;
  currTickIndexes = [prev3, prev2, prev1, n, next1, next2, next3]
  calculatePosition(currTickIndexes);
  resetPosition();
  ticks[n].setAttribute('transform', ticks[n].getAttribute('transform') + ' translate(0, ' + Math.min(...calcPos) + ')');
  ticks[prev1].setAttribute('transform', ticks[prev1].getAttribute('transform') + ' translate(0, ' + calcPos[2] + ')');
  ticks[next1].setAttribute('transform', ticks[next1].getAttribute('transform') + ' translate(0, ' + calcPos[4] + ')');
  ticks[prev2].setAttribute('transform', ticks[prev2].getAttribute('transform') + ' translate(0, ' + calcPos[1] + ')');
  ticks[next2].setAttribute('transform', ticks[next2].getAttribute('transform') + ' translate(0, ' + calcPos[5] + ')');
  ticks[prev3].setAttribute('transform', ticks[prev3].getAttribute('transform') + ' translate(0, ' + calcPos[0] + ')');
  //ticks[next3].setAttribute('transform', ticks[next3].getAttribute('transform') + ' translate(0, ' + calcPos[6] + ')');
}

svg.addEventListener('mousemove', function(e) {
  resetPosition();
  let _m = oMousePosSVG(svg, e);
  mouseX = _m.x;
  mouseY = _m.y;
  findQuadrant(mouseX, mouseY);
  posX = (mouseX > center) ? mouseX - center : (mouseX == center) ? mouseX - offset - r : -(mouseX - offset - r);
  posY = (mouseY > center) ? mouseY - center : -(mouseY - offset - r);
  relTheta = Math.atan(posY/posX) * (180/Math.PI);
  absTheta = (quad == 1) ? 90 - relTheta : (quad == 2) ? 90 + relTheta : (quad == 3) ? 180 + (90 - relTheta) : 270 + relTheta;
  applyTransform();
});

svg.addEventListener('mouseleave', function() {
  defaultPosition();
});



function oMousePosSVG(svg,evento) {
      var p = svg.createSVGPoint();
      p.x = evento.clientX;
      p.y = evento.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

body {
  margin: 0;
}
svg {
  width: 450px;
  height: 450px;
  background: #f00;
}

Mouse event mismatch due to resizing the svg element

Answers (1)

Related Questions