Search code examples
htmlcsssvgpositioncentering

How to change vertically centred SVGs appearance on hover?

I am trying to have four shapes lay over each other as in the picture 1. I want to them to change color on hover.

The problem with png's was that they are actually square so they would change color also in the transparent areas so I turned to SVG. Now they only change color when I am on the content, but they are still square and the transparent area blocks the shape underneath.

Most importantly, I can't figure out how to align them horizontally AND vertically in a way that is responsive.

Help would be much appreciated

![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>

Solution

  • more easy (and shorter) to do that with svg symbol:

    #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>