Quero codificar o design abaixo em HTML e CSS

O que eu fiz até agora é:

Eu fiz isso usando:

um linksSVG como plano de fundoPosição absoluta e propriedade de conversão (x, y) em CSS.

Por favor, checar istoviolino para o link ao vivo

Os problemas no meu design são:

Cada item é na verdade um retângulo; se você observar o retângulo destacado em vermelho, esta é a área da seleção; portanto, se você passar o mouse sobre o canto esquerdo de m2, ele selecionará m3.Eu quero mudar a cor de fundo do SVG ao passar o mouse, como conseguir isso?Existe uma maneira ideal de melhorar esse conceito? mesmo se usamos JS para posicionar os elementos.

Cliqueaqui para visualizar a própria forma SVG.

Código CSS para os itens:

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

Obrigado,