如何改变悬浮时垂直居中的SVG外观？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何改变悬浮时垂直居中的SVG外观？相关的知识，希望对你有一定的参考价值。

我想让四个形状互相叠加，如图1。我想让它们在悬停时改变颜色。

png的问题是它们实际上是正方形的，所以它们在透明区域也会改变颜色，所以我转而使用SVG。现在，只有当我在内容上时，它们才会改变颜色，但它们仍然是正方形的，而且透明区域挡住了下面的形状。

最重要的是，我不知道如何以响应的方式将它们水平和垂直对齐。

希望能得到帮助

![no hover]1

hover

#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 1550.03 1362.94"><defs><style>.cls-1{fill:#fff;}</style></defs><title>workshops2</title><g onmouseover="newTitle('workshops')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="239.76 106.13 240.16 106.13 240.16 106.52 239.76 106.13"/><polygon points="1122.78 132.43 1122.78 159.66 1068.82 159.66 1068.82 132.62 1042.4 132.62 1042.4 105.74 935.22 105.74 935.22 79.32 881.57 79.32 881.57 52.4 828.39 52.4 828.39 26.96 587.53 26.96 587.53 52.91 533.84 52.91 533.84 78.47 480.23 78.47 480.23 53.69 292.83 53.69 292.83 80.03 266.41 80.03 266.41 106.13 240.16 106.13 240.16 53.1 266.26 53.1 266.26 26.65 560.73 26.65 560.73 0 854.69 0 854.69 25.71 908.38 25.71 908.38 52.17 962.07 52.17 962.07 79.09 1068.78 79.09 1068.78 105.97 1095.74 105.97 1095.74 132.43 1122.78 132.43"/><polygon points="1122.78 160.01 1122.78 159.66 1123.17 159.66 1122.78 160.01"/><polygon points="1229.85 1256.73 1230.2 1256.73 1230.2 1257.12 1229.85 1256.73"/><polygon points="1471.17 828.98 1497.39 828.98 1497.39 935.38 1470.98 935.38 1470.98 988.99 1444.6 988.99 1444.6 1042.6 1417.76 1042.6 1417.76 1095.7 1390.91 1095.7 1390.91 1149.35 1364.54 1149.35 1364.54 1202.92 1337.22 1202.92 1337.22 1229.81 1310.85 1229.81 1310.85 1256.73 1230.2 1256.73 1230.2 1229.57 1283.96 1229.57 1283.96 1203.16 1310.85 1203.16 1310.85 1176.27 1337.26 1176.27 1337.26 1122.59 1364.14 1122.59 1364.14 1069.44 1390.99 1069.44 1390.99 1015.79 1417.4 1015.79 1417.4 962.18 1444.76 962.18 1444.76 908.53 1471.17 908.53 1471.17 828.98"/><polygon points="1497.78 828.98 1497.39 828.98 1497.39 828.62 1497.78 828.98"/><polygon points="320.41 1283.5 320.41 1283.89 320.02 1283.89 320.41 1283.5"/><polygon points="748.17 1310.96 748.17 1336.99 427.6 1336.99 427.6 1310.96 320.41 1310.96 320.41 1283.89 454.48 1283.89 454.48 1310.96 748.17 1310.96"/><polygon points="748.17 1337.38 748.17 1336.99 748.56 1336.99 748.17 1337.38"/><polygon points="1497.78 454.01 1497.78 454.4 1497.43 454.4 1497.78 454.01"/><polygon points="1497.39 828.62 1497.78 828.62 1497.78 828.98 1497.39 828.62"/><polygon points="1550.03 507.15 1550.03 748.17 1524.86 748.17 1524.86 828.62 1497.78 828.62 1497.78 721.09 1523.65 721.09 1523.65 534.16 1497.78 534.16 1497.78 454.4 1524 454.4 1524 507.15 1550.03 507.15"/><polygon points="1123.17 159.66 1123.17 160.01 1122.78 160.01 1123.17 159.66"/><polygon points="1363.6 266.22 1363.6 320.22 1336.48 320.22 1336.48 293.26 1310.14 293.26 1310.14 239.73 1256.11 239.73 1256.11 213 1176.35 213 1176.35 186.23 1123.17 186.23 1123.17 160.01 1202.92 160.01 1202.92 186.12 1282.83 186.12 1282.83 213.04 1336.56 213.04 1336.56 266.22 1363.6 266.22"/><polygon points="1363.6 320.57 1363.6 320.22 1363.99 320.22 1363.6 320.57"/><polygon points="748.56 1336.99 748.56 1337.38 748.17 1337.38 748.56 1336.99"/><polygon points="829.21 1310.61 1069.25 1310.61 1069.25 1336.91 855.9 1336.91 855.9 1362.94 748.56 1362.94 748.56 1337.38 829.21 1337.38 829.21 1310.61"/><polygon points="1069.64 1310.61 1069.25 1310.61 1069.25 1310.26 1069.64 1310.61"/><rect y="400.87" width="25.71" height="320.69"/><polygon points="25.71 721.56 26.07 721.56 25.71 721.95 25.71 721.56"/><polygon points="26.07 400.87 25.71 400.87 25.71 400.48 26.07 400.87"/><polygon points="79.6 828.62 79.6 828.98 79.21 828.98 79.6 828.62"/><polygon points="132.74 855.9 132.74 1069.4 106.71 1069.4 106.71 882.86 79.6 882.86 79.6 828.98 106.71 828.98 106.71 855.9 132.74 855.9"/><polygon points="132.74 1069.79 132.74 1069.4 133.09 1069.4 132.74 1069.79"/><polygon points="25.71 400.48 26.07 400.48 26.07 400.87 25.71 400.48"/><polygon points="78.81 240.31 105.97 240.31 105.97 294.19 79.05 294.19 79.05 320.57 52.28 320.57 52.28 400.48 26.07 400.48 26.07 294.12 52.44 294.12 52.44 267.27 78.81 267.27 78.81 240.31"/><polygon points="106.32 240.31 105.97 240.31 105.97 239.92 106.32 240.31"/><polygon points="1069.25 1310.26 1069.64 1310.26 1069.64 1310.61 1069.25 1310.26"/><polygon points="1150.37 1257.12 1229.85 1257.12 1229.85 1283.26 1176.78 1283.26 1176.78 1310.26 1069.64 1310.26 1069.64 1283.26 1150.37 1283.26 1150.37 1257.12"/><polygon points="1230.2 1257.12 1229.85 1257.12 1229.85 1256.73 1230.2 1257.12"/><polygon points="133.09 1069.4 133.09 1069.79 132.74 1069.79 133.09 1069.4"/><path d="M213,1123.6v79.6H186.78v-52.68c-9.52-.43-17.71-.78-26.77-1.17v-25.67H133.09v-53.89h27.16v27h26.37v26.84Z"/><polygon points="213 1203.59 213 1203.2 213.39 1203.2 213 1203.59"/><polygon points="213.39 1203.2 213.39 1203.59 213 1203.59 213.39 1203.2"/><polygon points="320.02 1257.31 320.02 1283.5 240.62 1283.5 240.62 1257.35 213.39 1257.35 213.39 1203.59 240.51 1203.59 240.51 1230.55 266.88 1230.55 266.88 1257.31 320.02 1257.31"/><polygon points="320.02 1283.89 320.02 1283.5 320.41 1283.5 320.02 1283.89"/><polygon points="105.97 239.92 106.32 239.92 106.32 240.31 105.97 239.92"/><polygon points="159.11 160.05 186.23 160.05 186.23 213.74 159.08 213.74 159.08 239.92 106.32 239.92 106.32 213.74 132.78 213.74 132.78 186.94 159.11 186.94 159.11 160.05"/><polygon points="186.62 160.05 186.23 160.05 186.23 159.66 186.62 160.05"/><polygon points="1363.99 320.22 1363.99 320.57 1363.6 320.57 1363.99 320.22"/><polygon points="1417.09 320.57 1417.09 373.71 1390.17 373.71 1390.17 346.6 1363.99 346.6 1363.99 320.57 1417.09 320.57"/><polygon points="1417.09 374.1 1417.09 373.71 1417.52 373.71 1417.09 374.1"/><polygon points="52.87 775.09 52.87 775.48 52.44 775.48 52.87 775.09"/><rect x="52.87" y="775.48" width="26.34" height="53.14"/><polygon points="79.21 828.98 79.21 828.62 79.6 828.62 79.21 828.98"/><polygon points="26.07 721.56 26.07 721.95 25.71 721.95 26.07 721.56"/><rect x="26.06" y="721.95" width="26.38" height="53.14"/><polygon points="52.44 775.48 52.44 775.09 52.87 775.09 52.44 775.48"/><polygon points="186.23 159.66 186.62 159.66 186.62 160.05 186.23 159.66"/><rect x="186.62" y="133.29" width="26.38" height="26.38"/><polygon points="213.39 133.28 213 133.28 213 132.9 213.39 133.28"/><polygon points="213 132.9 213.39 132.9 213.39 133.28 213 132.9"/><rect x="213.39" y="106.52" width="26.38" height="26.38"/><polygon points="240.16 106.52 239.76 106.52 239.76 106.13 240.16 106.52"/><polygon points="1471.02 427.25 1471.02 427.64 1470.66 427.64 1471.02 427.25"/><rect x="1471.01" y="427.64" width="26.42" height="26.38"/><polygon points="1497.43 454.4 1497.43 454.01 1497.78 454.01 1497.43 454.4"/><polygon points="1444.25 400.48 1444.25 400.87 1443.9 400.87 1444.25 400.48"/><rect x="1444.25" y="400.87" width="26.42" height="26.38"/><polygon points="1470.66 427.64 1470.66 427.25 1471.02 427.25 1470.66 427.64"/><polygon class="cls-1" points="1523.65 534.16 1523.65 721.09 1497.78 721.09 1497.78 828.62 1497.39 828.62 1497.39 828.98 1471.17 828.98 1471.17 908.53 1444.76 908.53 1444.76 962.18 1417.4 962.18 1417.4 1015.79 1390.99 1015.79 1390.99 1069.44 1364.14 1069.44 1364.14 1122.59 1337.26 1122.59 1337.26 1176.27 1310.85 1176.27 1310.85 1203.16 1283.96 1203.16 1283.96 1229.57 1230.2 1229.57 1230.2 1256.73 1229.85 1256.73 1229.85 1257.12 1150.37 1257.12 1150.37 1283.26 1069.64 1283.26 1069.64 1310.26 1069.25 1310.26 1069.25 1310.61 829.21 1310.61 829.21 1337.38 748.56 1337.38 748.56 1336.99 748.17 1336.99 748.17 1310.96 454.48 1310.96 454.48 1283.89 320.41 1283.89 320.41 1283.5 320.02 1283.5 320.02 1257.31 266.88 1257.31 266.88 1230.55 240.51 1230.55 240.51 1203.59 213.39 1203.59 213.39 1203.2 213 1203.2 213 1123.6 186.62 1123.6 186.62 1096.76 160.25 1096.76 160.25 1069.79 133.09 1069.79 133.09 1069.4 132.74 1069.4 132.74 855.9 106.71 855.9 106.71 828.98 79.6 828.98 79.6 828.62 79.21 828.62 79.21 775.48 52.87 775.48 52.87 775.09 52.44 775.09 52.44 721.95 26.07 721.95 26.07 721.56 25.71 721.56 25.71 400.87 26.07 400.87 26.07 400.48 52.28 400.48 52.28 320.57 79.05 320.57 79.05 294.19 105.97 294.19 105.97 240.31 106.32 240.31 106.32 239.92 159.08 239.92 159.08 213.74 186.23 213.74 186.23 160.05 186.62 160.05 186.62 159.66 213 159.66 213 133.28 213.39 133.28 213.39 132.9 239.76 132.9 239.76 106.52 240.16 106.52 240.16 106.13 266.41 106.13 266.41 80.03 292.83 80.03 292.83 53.69 480.23 53.69 480.23 78.47 533.84 78.47 533.84 52.91 587.53 52.91 587.53 26.96 828.39 26.96 828.39 52.4 881.57 52.4 881.57 79.32 935.22 79.32 935.22 105.74 1042.4 105.74 1042.4 132.62 1068.82 132.62 1068.82 159.66 1122.78 159.66 1122.78 160.01 1123.17 160.01 1123.17 186.23 1176.35 186.23 1176.35 213 1256.11 213 1256.11 239.73 1310.14 239.73 1310.14 293.26 1336.48 293.26 1336.48 320.22 1363.6 320.22 1363.6 320.57 1363.99 320.57 1363.99 346.6 1390.17 346.6 1390.17 373.71 1417.09 373.71 1417.09 374.1 1417.52 374.1 1417.52 400.48 1443.9 400.48 1443.9 400.87 1444.25 400.87 1444.25 427.25 1470.66 427.25 1470.66 427.64 1471.02 427.64 1471.02 454.01 1497.43 454.01 1497.43 454.4 1497.78 454.4 1497.78 534.16 1523.65 534.16"/><polygon points="1417.52 373.71 1417.52 374.1 1417.09 374.1 1417.52 373.71"/><rect x="1417.52" y="374.1" width="26.38" height="26.38"/><polygon points="1443.9 400.87 1443.9 400.48 1444.25 400.48 1443.9 400.87"/></g></g></svg>

   

    <svg id="shape2" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1175.26 1042.05"><defs><style>.cls-1{fill:#fff;}</style></defs><title>dreaming2</title><g onmouseover="newTitle('dreaming')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="52.24 534.35 52.63 534.35 52.63 534.7 52.24 534.35"/><path d="M774.7.39V25.91h-54V52.17H560.57V27.08H346.44V53H266V80H239.57v26.88H185.92v26.46H159v53.64H132.58v80.46H105.27V508.25H78.89v26.1H52.63v-53h26.5V240.43h26.41V160.56c9.56-.43,17.8-.82,26.89-1.21V106.83h26.92V79.91h53.18V53h26.88V26.57h80.42V0H587V25.24H694.13V.39Z"/><polygon points="774.7 26.3 774.7 25.91 775.09 25.91 774.7 26.3"/><polygon points="266.69 989.22 266.69 989.61 266.3 989.61 266.69 989.22"/><polygon points="374.1 1016.34 667.67 1016.34 667.67 1042.05 347.3 1042.05 347.3 1016.81 266.69 1016.81 266.69 989.61 374.1 989.61 374.1 1016.34"/><polygon points="668.06 1016.34 667.67 1016.34 667.67 1015.99 668.06 1016.34"/><polygon points="52.24 775.64 52.24 828.66 26.02 828.66 26.02 802.64 0 802.64 0 615.08 25.16 615.08 25.16 534.7 52.24 534.7 52.24 642.2 26.38 642.2 26.38 775.64 52.24 775.64"/><polygon points="52.24 828.66 52.6 828.66 52.24 829.05 52.24 828.66"/><polygon points="52.63 534.7 52.24 534.7 52.24 534.35 52.63 534.7"/><polygon points="667.67 1015.99 668.06 1015.99 668.06 1016.34 667.67 1015.99"/><polygon points="775.52 962.85 881.73 962.85 881.73 988.99 801.93 988.99 801.93 1015.99 668.06 1015.99 668.06 988.99 775.52 988.99 775.52 962.85"/><polygon points="882.12 962.85 881.73 962.85 881.73 962.46 882.12 962.85"/><polygon points="52.6 828.66 52.6 829.05 52.24 829.05 52.6 828.66"/><polygon points="186.04 936.27 186.04 962.46 133.01 962.46 133.01 936.35 106.56 936.35 106.56 909.43 79.63 909.43 79.63 883.01 52.6 883.01 52.6 829.05 79.71 829.05 79.71 855.94 106.05 855.94 106.05 882.74 133.28 882.74 133.28 909.51 159.62 909.51 159.62 936.27 186.04 936.27"/><polygon points="186.04 962.85 186.04 962.46 186.39 962.46 186.04 962.85"/><polygon points="1095.82 775.13 1096.17 775.13 1096.17 775.52 1095.82 775.13"/><polygon points="1123.29 561.47 1149.31 561.47 1149.31 748.25 1123.33 748.25 1123.33 775.13 1096.17 775.13 1096.17 721.33 1123.29 721.33 1123.29 561.47"/><polygon points="1149.7 561.47 1149.31 561.47 1149.31 561.12 1149.7 561.47"/><polygon points="775.09 25.91 775.09 26.3 774.7 26.3 775.09 25.91"/><polygon points="908.49 105.82 908.49 132.97 854.61 132.97 854.61 106.05 801.59 106.05 801.59 52.52 775.09 52.52 775.09 26.3 828 26.3 828 79.44 881.53 79.44 881.53 105.82 908.49 105.82"/><polygon points="908.49 133.32 908.49 132.97 908.88 132.97 908.49 133.32"/><polygon points="962.02 882.16 962.38 882.16 962.38 882.55 962.02 882.16"/><polygon points="1069.56 775.52 1095.82 775.52 1095.82 828.43 1069.36 828.43 1069.36 855.27 1016.3 855.27 1016.3 882.16 962.38 882.16 962.38 855 989.46 855 989.46 828.55 1043.11 828.55 1043.11 801.62 1069.56 801.62 1069.56 775.52"/><polygon points="1096.17 775.52 1095.82 775.52 1095.82 775.13 1096.17 775.52"/><polygon points="1122.94 373.79 1122.94 374.18 1122.59 374.18 1122.94 373.79"/><polygon points="1149.31 561.12 1149.7 561.12 1149.7 561.47 1149.31 561.12"/><polygon points="1175.26 400.25 1175.26 561.12 1149.7 561.12 1149.7 427.09 1122.94 427.09 1122.94 374.18 1149.23 374.18 1149.23 400.25 1175.26 400.25"/><polygon points="908.88 132.97 908.88 133.32 908.49 133.32 908.88 132.97"/><polygon points="1015.52 186.08 1015.52 213.23 961.67 213.23 961.67 186.35 935.34 186.35 935.34 159.54 908.88 159.54 908.88 133.32 961.75 133.32 961.75 159.74 988.6 159.74 988.6 186.08 1015.52 186.08"/><polygon points="1015.52 213.58 1015.52 213.23 1015.91 213.23 1015.52 213.58"/><polygon points="881.73 962.46 882.12 962.46 882.12 962.85 881.73 962.46"/><polygon points="909.27 882.55 962.02 882.55 962.02 908.73 935.57 908.73 935.57 935.57 909.23 935.57 909.23 962.46 882.12 962.46 882.12 908.77 909.27 908.77 909.27 882.55"/><polygon points="962.38 882.55 962.02 882.55 962.02 882.16 962.38 882.55"/><polygon points="1069.44 293.49 1069.44 293.88 1069.05 293.88 1069.44 293.49"/><polygon points="1122.59 320.14 1122.59 373.79 1095.55 373.79 1095.55 346.56 1069.44 346.56 1069.44 293.88 1095.51 293.88 1095.51 320.14 1122.59 320.14"/><polygon points="1122.59 374.18 1122.59 373.79 1122.94 373.79 1122.59 374.18"/><polygon points="186.39 962.46 186.39 962.85 186.04 962.85 186.39 962.46"/><rect x="186.39" y="962.85" width="79.91" height="26.38"/><polygon points="266.3 989.61 266.3 989.22 266.69 989.22 266.3 989.61"/><polygon points="1042.68 240 1042.68 240.39 1042.29 240.39 1042.68 240"/><rect x="1042.68" y="240.39" width="26.38" height="53.1"/><polygon points="1069.05 293.88 1069.05 293.49 1069.44 293.49 1069.05 293.88"/><polygon class="cls-1" points="1149.7 427.09 1149.7 561.12 1149.31 561.12 1149.31 561.47 1123.29 561.47 1123.29 721.33 1096.17 721.33 1096.17 775.13 1095.82 775.13 1095.82 775.52 1069.56 775.52 1069.56 801.62 1043.11 801.62 1043.11 828.55 989.46 828.55 989.46 855 962.38 855 962.38 882.16 962.02 882.16 962.02 882.55 909.27 882.55 909.27 908.77 882.12 908.77 882.12 962.46 881.73 962.46 881.73 962.85 775.52 962.85 775.52 988.99 668.06 988.99 668.06 1015.99 667.67 1015.99 667.67 1016.34 374.1 1016.34 374.1 989.61 266.69 989.61 266.69 989.22 266.3 989.22 266.3 962.85 186.39 962.85 186.39 962.46 186.04 962.46 186.04 936.27 159.62 936.27 159.62 909.51 133.28 909.51 133.28 882.74 106.05 882.74 106.05 855.94 79.71 855.94 79.71 829.05 52.6 829.05 52.6 828.66 52.24 828.66 52.24 775.64 26.38 775.64 26.38 642.2 52.24 642.2 52.24 534.7 52.63 534.7 52.63 534.35 78.89 534.35 78.89 508.25 105.27 508.25 105.27 267.39 132.58 267.39 132.58 186.94 159.04 186.94 159.04 133.28 185.92 133.28 185.92 106.83 239.57 106.83 239.57 79.95 266.02 79.95 266.02 53.02 346.44 53.02 346.44 27.08 560.57 27.08 560.57 52.17 720.74 52.17 720.74 25.91 774.7 25.91 774.7 26.3 775.09 26.3 775.09 52.52 801.59 52.52 801.59 106.05 854.61 106.05 854.61 132.97 908.49 132.97 908.49 133.32 908.88 133.32 908.88 159.54 935.34 159.54 935.34 186.35 961.67 186.35 961.67 213.23 1015.52 213.23 1015.52 213.58 1015.91 213.58 1015.91 240 1042.29 240 1042.29 240.39 1042.68 240.39 1042.68 293.49 1069.05 293.49 1069.05 293.88 1069.44 293.88 1069.44 346.56 1095.55 346.56 1095.55 373.79 1122.59 373.79 1122.59 374.18 1122.94 374.18 1122.94 427.09 1149.7 427.09"/><polygon points="1015.91 213.23 1015.91 213.58 1015.52 213.58 1015.91 213.23"/><rect x="1015.91" y="213.58" width="26.38" height="26.42"/><polygon points="1042.29 240.39 1042.29 240 1042.68 240 1042.29 240.39"/></g></g></svg>

 <svg id="shape3" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720.58 720.78"><defs><style>.cls-1{fill:#fff;}</style></defs><title>invasion2</title><g onmouseover="newTitle('invasion')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="400.09 561.27 400.09 560.88 400.48 560.88 400.09 561.27"/><polygon points="507.12 25.36 507.12 52.52 185.57 52.52 185.57 26.65 132.35 26.65 132.35 53.34 78.66 53.34 78.66 79.83 26.77 79.83 26.77 347.61 105 347.61 105 427.6 79.99 427.6 79.99 481.29 106.25 481.29 106.25 507.74 159.97 507.74 159.97 694.21 239.96 694.21 239.96 667.6 293.65 667.6 293.65 641.1 319.01 641.1 319.01 533.92 294.12 533.92 294.12 508.6 373.99 508.6 373.99 534.62 400.09 534.62 400.09 560.88 347.65 560.88 347.65 587.38 372.5 587.38 372.5 641.07 347.22 641.07 347.22 667.52 320.3 667.52 320.3 694.44 267.16 694.44 267.16 720.78 133.21 720.78 133.21 535.05 79.6 535.05 79.6 508.13 53.49 508.13 53.49 400.99 78.43 400.99 78.43 374.88 26.11 374.88 26.11 399.78 0 399.78 0 53.22 52.21 53.22 52.21 26.3 105.39 26.3 105.39 0 212.57 0 212.57 25.36 507.12 25.36"/><polygon points="507.12 52.87 507.12 52.52 507.51 52.52 507.12 52.87"/><polygon points="507.51 52.52 507.51 52.87 507.12 52.87 507.51 52.52"/><polygon points="507.12 587.65 507.51 587.65 507.51 588.04 507.12 587.65"/><polygon points="720.58 346.52 720.58 480.39 695.22 480.39 695.22 507.31 641.57 507.31 641.57 533.77 587.88 533.77 587.88 560.65 561.47 560.65 561.47 587.65 507.51 587.65 507.51 560.45 534.55 560.45 534.55 534 561.47 534 561.47 507.12 614.69 507.12 614.69 480.19 668.38 480.19 668.38 453.7 693.58 453.7 693.58 373.29 667.56 373.29 667.56 319.6 640.6 319.6 640.6 293.18 613.75 293.18 613.75 132.5 587.3 132.5 587.3 105.58 560.38 105.58 560.38 79.17 507.51 79.17 507.51 52.87 587.22 52.87 587.22 78.93 613.67 78.93 613.67 105.82 640.99 105.82 640.99 266.45 667.4 266.45 667.4 293.34 694.29 293.34 694.29 346.52 720.58 346.52"/><polygon class="cls-1" points="693.58 373.29 693.58 453.7 668.38 453.7 668.38 480.19 614.69 480.19 614.69 507.12 561.47 507.12 561.47 534 534.55 534 534.55 560.45 507.51 560.45 507.51 587.65 507.12 587.65 507.12 588.04 454.29 588.04 454.29 561.27 400.48 561.27 400.48 560.88 400.09 560.88 400.09 534.62 373.99 534.62 373.99 508.6 294.12 508.6 294.12 533.92 319.01 533.92 319.01 641.1 293.65 641.1 293.65 667.6 239.96 667.6 239.96 694.21 159.97 694.21 159.97 507.74 106.25 507.74 106.25 481.29 79.99 481.29 79.99 427.6 105 427.6 105 347.61 26.77 347.61 26.77 79.83 78.66 79.83 78.66 53.34 132.35 53.34 132.35 26.65 185.57 26.65 185.57 52.52 507.12 52.52 507.12 52.87 507.51 52.87 507.51 79.17 560.38 79.17 560.38 105.58 587.3 105.58 587.3 132.5 613.75 132.5 613.75 293.18 640.6 293.18 640.6 319.6 667.56 319.6 667.56 373.29 693.58 373.29"/><polygon points="400.48 560.88 400.48 561.27 400.09 561.27 400.48 560.88"/><polygon points="454.29 588.04 507.12 588.04 507.12 613.75 427.52 613.75 427.52 588.47 400.48 588.47 400.48 561.27 454.29 561.27 454.29 588.04"/><polygon points="507.51 588.04 507.12 588.04 507.12 587.65 507.51 588.04"/></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符号。

#mySVG {
  margin: 1em;
  width: 90vw;
  height: 90vh;
  background-color: lightblue;
}
#shape1, #shape2, 
#shape3, #shape4 { fill:red }
#shape1:hover, #shape2:hover, 
#shape3:hover, #shape4:hover { fill:blue }
 
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
  <defs>
    <symbol id="shapeRef" viewBox="0 0 240 240" >
        <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 fill="transparent"
          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" />
    </symbol>
  </defs>

  <use xlink:href="#shapeRef" x="50"  y="50" width="120" height="120" id="shape1" />
  <use xlink:href="#shapeRef" x="74"  y="74"  width="72"  height="72" id="shape2" />
  <use xlink:href="#shapeRef" x="92"  y="92"  width="36"  height="36" id="shape3" />
  <use xlink:href="#shapeRef" x="104" y="104" width="12"  height="12" id="shape4" />
</svg>
另一答案

把你的悬停事件应用到SVG上。<path> 而不是全部 <g>. 该 <g> 只是一个容器元素，所以基本上是一个盒子。

在你的CSS中。

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

至于居中， 这真的取决于你其余的标记。一种选择是用绝对定位的子元素来做弹性容器。就像下面这样。

.main-wrapper {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

svg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  transform-origin: center center;
}

注意： 你不需要通过ID来选择所有4个svgs。因为它们都可以在CSS中被锁定，只需用 svg.

在这里，它是在一个小提琴。https:/jsfiddle.netLf6nchem：

另一答案

谢谢大家的帮助! 这里也是使用以下方法改变双色的颜色。fill:currentColor

#mySVG {
  margin: 1em;
  width: 90vw;
  height: 90vh;
  background-color: green;
}
#shape1, #shape2, 
#shape3, #shape4 { fill:red; color:white; }
#shape1:hover, #shape2:hover, 
#shape3:hover, #shape4:hover { fill:blue; color:yellow; }
.fill{fill:currentColor;}
 
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
  <defs>
    <symbol id="shapeRef" viewBox="0 0 240 240" >
        <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="fill"
          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" />
    </symbol>
  </defs>

  <use xlink:href="#shapeRef" x="50"  y="50" width="120" height="120" id="shape1" />
  <use xlink:href="#shapeRef" x="74"  y="74"  width="72"  height="72" id="shape2" />
  <use xlink:href="#shapeRef" x="92"  y="92"  width="36"  height="36" id="shape3" />
  <use xlink:href="#shapeRef" x="104" y="104" width="12"  height="12" id="shape4" />
</svg>

以上是关于如何改变悬浮时垂直居中的SVG外观？的主要内容，如果未能解决你的问题，请参考以下文章

SVG 动画圆圈垂直和水平居中

CSS如何在不改变图像样式的情况下垂直居中图像和文本

svg中text标签里面的文字怎么实现垂直和水平的居中

具有锚链接的垂直居中svg图像

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

css常用代码片段 (更新中)