Quiero codificar el siguiente diseño en HTML y CSS

Lo que hice hasta ahora es:

Lo hice usando:

un enlacesSVG como fondoPosición absoluta y propiedad de traducción (x, y) en CSS.

Por favor, chequee estoviolín para el enlace en vivo

Los problemas en mi diseño son:

Cada elemento es en realidad un rectángulo, si observa el rectángulo resaltado en rojo, esta es el área de la selección, por lo que si pasa el cursor sobre la esquina izquierda de m2, seleccionará m3.Quiero cambiar el color de fondo del fondo SVG al pasar el mouse, ¿cómo lograrlo?¿Hay una manera ideal de mejorar este concepto? incluso si usamos JS para posicionar los elementos.

Hacer clicaquí para ver la forma SVG en sí misma.

Código CSS para los artículos:

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

Gracias,