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

Question

[Максим]

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

Comments

[RAX7]

https://www.sitepoint.com/how-to-translate-from-do...

[Максим]

RAX7, я вот щас переделал - и вместо circle у меня div но я хотел без примесей html - сам circle не получается заставить стоять строго по центру по курсором

[RAX7]

Максим Ленский, потому что event.x это координаты относительно вьюпорта, т.е. (0, 0) находиться в верхнем левом углу окна браузера, а svg смещён на 8px из-за марджина у body.

[Максим]

RAX7, даже если убрать маргин и паддинг то svg circle при движении курсора в право - отстаёт на 100-180 пикселей - можешь сам поглянуть в codepen

[RAX7]

Максим Ленский, у меня ничего не отстает, если обнулить марджин у боди, либо сделать так:

let item = document.querySelector(".circle");

svg.onmousemove = function (e) {
  let x = svg.getBoundingClientRect().x;
  let y = svg.getBoundingClientRect().y;

  item.style.position = "absolute";
  item.style.left = e.x - x - 75 + "px";
  item.style.top = e.y - y - 75 + "px";
};

[Максим]

RAX7, блин ..это html div - я его специально затолкал туда потому что - svg circle - он display: none - отстаёт от курсора

Answer 1

[Александр]

Имели ввиду это?

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)
  );
});

Comments

[Максим]

ну не совсем то - мне надо просто что бы circle всегда был под курсором - центр circle был под курсором

[Александр]

Максим Ленский, А сейчас что, центр не под курсором?

[Максим]

Александр, в вашем случае - да но меня смущает огромное кол-во кода + фризы в FF

[Александр]

Максим Ленский, Не наблюдаю фризов в FF. В любом случае, необходимо переводить одну систему координат в другую.

[Максим]

Александр, минут пять погодите - я покажу пример и вы поймёте

[Максим]

Александр, https://codepen.io/topicstarter/pen/dyYdKQO - смотрите

[Александр]

Максим Ленский, То, что при ресайзе не доходит до конца? Тогда так:

let size = svg.getBoundingClientRect();
...
const debounce = (callback, duration) => {
	let timeout = null;

	return (...args) => {
		clearTimeout(timeout);
		timeout = setTimeout(callback, duration, ...args);
	};
};
...
window.addEventListener('resize', debounce(() => {
	size = svg.getBoundingClientRect();
}, 100));

[Максим]

Александр, видео - в нём шарик дёргается : https://www.dropbox.com/s/vhskwqn17i4ltzz/%D1%84%D...

[Александр]

Максим Ленский, mix-blend-mode пробовали убирать?

[Максим]

Александр, он как раз нужен

[Максим]

Александр, там в идеале должен быть path который меняет шейп средствами smil