Я хочу, чтобы код ниже дизайн в HTML и CSS

Что я сделал до сих пор:

Я сделал это с помощью:

ссылкиSVG в качестве фонаАбсолютное положение и свойство translate (x, y) в CSS.

Пожалуйста, проверьте этоиграть на скрипке для живой ссылки

Проблемы в моем дизайне:

Каждый элемент на самом деле является прямоугольником, если вы заметите выделенный красный прямоугольник, это область выделения, поэтому, если вы наведите курсор мыши на левый угол m2, он выберет m3.Я хочу изменить цвет фона SVG-фона при наведении, как этого добиться?Есть ли идеальный способ сделать эту концепцию лучше? даже если мы использовали JS для позиционирования элементов.

НажмитеВот для просмотра самой фигуры SVG.

CSS код для предметов:

.menu #m1 {
  right: 100px;
  transform: translate(-140px, -160px);
}
.menu #m2 {
  right: 295px;
  transform: translate(-25px, -80px);
}
.menu #m3 {
  right: 400px;
}
.menu #m4 {
  right: -60px;
  transform: translate(-140px, -160px);
}
.menu #m5 {
  right: 140px;
  transform: translate(-20px, -80px);
}
.menu #m6 {
  right: 240px;
}
.menu #m7 {
  right: -95px;
  transform: translate(-15px, -160px);
}
.menu #m8 {
  right: 0px;
  transform: translate(0, -80px);
}

Спасибо,