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

问题描述 投票：0回答：1

我想让四个形状互相叠加，如图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>
html css svg position centering
1个回答
1
投票

更容易（和短）做到这一点与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>
0
投票

把你的悬停事件应用到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：

0
投票

谢谢大家的帮助! 这里也是使用以下方法改变双色的颜色。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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.