bbs-go-site

我正在尝试使四个形状相互重叠，如图1所示。我想让他们在悬停时更改颜色。

png的问题在于它们实际上是正方形的，因此它们也会在透明区域中改变颜色，因此我转向SVG。现在，它们仅在内容出现时才更改颜色，但它们仍然是正方形，透明区域会阻挡下面的形状。

最重要的是，我无法弄清楚如何以响应方式将它们水平和垂直对齐。

帮助将不胜感激

#Fill-1 {
  fill: red;
}

#Fill-1:hover {
  fill: blue;
}

.main-wrapper {
  text-align: center;
  width: 100vw;
  height: 100vh;
}

#shape1,
#shape2,
#shape3,
#shape4 {
  position: absolute;
  left: 0;
}

#shape1 {
  transform: scale(0.5);
}

#shape2 {
  transform: scale(0.3);
}

#shape3 {
  transform: scale(0.15);
}

#shape4 {
  transform: scale(0.05);
}

<body>
  <div class="main-wrapper">


    <svg id="shape1" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g  id="Layer_2-2" data-name="Layer 2"><path  d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>

    <svg id="shape2" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g  id="Layer_2-2" data-name="Layer 2"><path  d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>

    <svg id="shape3" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g  id="Layer_2-2" data-name="Layer 2"><path  d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>

    <svg id="shape4" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g  id="Layer_2-2" data-name="Layer 2"><path  d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>


  </div>
</body>

如何在悬停时更改垂直居中的SVG外观？