Ich möchte das folgende Design in HTML & CSS codieren

as ich bisher gemacht habe ist:

Ich habe es gemacht mit:

a linksSVG als HintergrundAbsolute Position und translate (x, y) -Eigenschaft in CSS.

Bitte prüfen Sie dasGeig für den Live-Link

Die Probleme in meinem Design sind:

Jedes Element ist tatsächlich ein Rechteck. Wenn Sie das hervorgehobene Rechteck in Rot bemerken, ist dies der Bereich der Auswahl. Wenn Sie also mit der Maus über die linke Ecke von m2 fahren, wird m3 ausgewählt.Ich möchte die Hintergrundfarbe des SVG-Hintergrunds ändern, wenn Sie den Mauszeiger darüber halten.ibt es einen idealen Weg, um dieses Konzept zu verbessern? auch wenn wir JS verwendet haben, um die Elemente zu positionieren.

KlickenHie, um die SVG-Form selbst anzuzeigen.

CSS-Code für die Elemente:

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

Vielen Dank