Lafayette West Building Picker 2

by Jacob Pearlstein

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  </head>

  <body>
    <div class="margin">
      <style>
        svg#buildings>a>path,
        #buildings>a>polygon {
          fill: rgba(183, 204, 96, .4);
        }

        #buildings>a>path:hover,
        #buildings>a>polygon:hover,
        #buildings>a>path.active,
        #buildings>a>polygon.active {
          fill: rgba(148, 216, 236, 0.5);
        }

      </style>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
        <g id="background">
          <image xlink:href="https://i.imgur.com/QljdAp4.jpg" />
        </g>
        <g id="buildingPicker">
          <g id="buildings">
            <a xlink:href="https://lwdetroit.com/apartment-test" target="_blank">
              <polygon id="91181" data-name="91181" xlink:href="http://google.com" class="cls-1" points="725.51 549.68 774.19 519.35 764.62 445.94 569.5 417.61 512.04 437.56 524.41 499 533.99 500.6 535.58 510.18 537.67 510.35 536.54 501 540.11 501.42 559.04 593.12 625.08 611.72 711.49 557.6 711.49 547.85 715.17 546.43 725.51 549.68" /></a>
            <a xlink:href="https://google.com" target="_blank">
              <polygon id="91177" data-name="91177" class="cls-1" points="503.26 710.88 574.69 665.79 551.94 569.23 312.93 514.57 226.34 544.49 267.04 632.28 503.26 710.88" /></a>
          </g>
        </g>
      </svg>
      <br />
    </div>

  </body>

</html>