adapp2

by joaocv3

HTML

<div class="img-overlay-wrap">

  <img src="https://media.discordapp.net/attachments/871881977408655385/874401995790897162/Screenshot_1.png">
  <svg heigth="100%" width="100%"   viewBox="0 0 1136 401">
      <!-- Request https://us-central1-adapp-ages-2021-2.cloudfunctions.net/referencePoints/shortest_path?origin=entrada_1_piso_1&dest=rei_do_pao_de_queijo --> 
      <polyline points="830,276 825,272 807,270 794,270 743,270 700,255 600,255"
            fill="none" stroke="green" style="stroke-width:4" stroke-dasharray="5,5" />
  </svg>

</div>

CSS

.img-overlay-wrap {
  position: relative;
  display: inline-block; 
  height: 401px;
  width: 1136px;
}

.img-overlay-wrap img {
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
     max-height: 100%;
}