How to complete this effect?

Question

JavaScript

I'm doing some animation - movement of the circle under the mouse
When the mouse hits under the objects, mix-blend-mode + svg clip-path occurs
but the circle does not reach the borders of the svg
Maybe clientXthis is not the method to use
How to finish this effect ?

Answer 1

Did you mean this?

const svg = document.querySelector('#svg');
const item = svg.querySelector('#rect');

const size = svg.getBoundingClientRect();
const viewBox = svg
  .getAttribute('viewBox')
  .split(/\s+/g)
  .map(entry => Number(entry));

const normalize = (min, max, value) => {
  return (value - min) / (max - min);
};

const lerp = (min, max, value) => {
  return (1 - value) * min + value * max;
};

const map = (minSource, maxSource, minDestination, maxDestination, value) => {
  return lerp(minDestination, maxDestination, normalize(minSource, maxSource, value));
};

svg.addEventListener('mousemove', event => {
  item.setAttribute(
    'cx',
    map(0, size.width, viewBox[0], viewBox[2], event.offsetX)
  );
  item.setAttribute(
    'cy',
    map(0, size.height, viewBox[1], viewBox[3], event.offsetY)
  );
});