LenovoId
@LenovoId
I want, women not to get sick

Как доделать этот эффект?

Я делаю некую анимацию - движение круга под мышкой
При попадании мышки под объекты происходит mix-blend-mode + svg clip-path
но круг не доходит границ svg
ВозможноclientX это не тот метод который надо использовать
Как доделать этот эффект ?

  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
Имели ввиду это?
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)
  );
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы