Как протянуть свг от одного элемента к другому?

Question

[godsplan]

суть такая:
Есть 8 блоков, есть блок по центру этих 8 блоков. При наведении на один из 8 блоков от него идет свг к центру центрального блока.
Я не хочу делать 8 псевдоэлементов и поворачивать их к центру индивидуально каждый.
Суть решения я вижу в том чтобы находить тангенс угла и делать rotate из центрального блока на наведенный.
моя ужасная попытка:

spoiler

unction getTanDeg(deg) {
  let rad = Math.tan(deg)
  return rad * (180 / Math.PI)
}
function DrawLine(item, target) {
  const targetX = target.offsetLeft + (target.getBoundingClientRect().width / 2);
  const targetY = target.offsetTop + (target.getBoundingClientRect().height / 2);
  const itemX = item.offsetLeft + (item.getBoundingClientRect().width / 2);
  const itemY = item.offsetTop + (item.getBoundingClientRect().height / 2);
  let trueHeight,
    trueWidth, right, top, degI
  if (itemY > targetY) {
    trueHeight = itemY - targetY;
    top = true;
  } else {
    trueHeight = targetY - itemY;
    top = true;
  }
  if (itemX > targetX) {
    trueWidth = itemX - targetX;
    right = true;
  } else {
    trueWidth = targetX - itemX;
    right = false;
  }
  let pifagor = Math.sqrt(trueWidth, + trueHeight);
  if (right) {
    if (top) {
      degI = ''
    } else {
      degI = '-'
    }
  } else {
    if (top) {
      degI = '-'
    } else {
      degI = ''
    }
  }
  console.log(itemY, targetY)
  let deg = getTanDeg(trueHeight / pifagor)
  target.querySelector('svg').style.transform = `translate(-50%,-50%) rotate(${degI + deg}deg) `

В макете выглядит так

Какие есть варианты решения?

Comments

[Ankhena]

И зачем дублировать вопрос?

[godsplan]

Ankhena, прошлый удалили за теги

[godsplan]

Ankhena, мне пригло ваше решени ена почту, но там только стрелка, а нужна свг картинка.

[Ankhena]

godsplane, тогда понятно

[Ankhena]

godsplane,

Суть решения я вижу в том чтобы находить тангенс угла

Может, не париться и сразу написать его в data- ?

[godsplan]

Ankhena, ну тогда это не будет не динамично

Answer 1

[RAX7]

Comments

[godsplan]

Капец, спасибо большое за такой огромный объем работы, это то что нужно. Сам бы явряд ли справился.Спасибо!