Как сохранить SVG в отношении отзывчивого полноэкранного фонового изображения с реагированием

Question

У меня проблемы с SVG, который я хочу разместить на фоновом изображении.

Требования:

1. Фоновое изображение должно быть отзывчивым и полноэкранным.
2. svg должен быть расположен в определенной позиции на изображении, например, в соответствии с окном дома (см. Скриншот)
3. элемент должен быть svg, потому что я хочу его анимировать (без тега области)

Я пытаюсь решить эту проблему в течение нескольких дней, но не могу заставить его работать.

снимок экрана

Вот мой код:

import React from 'react';
import './App.css';


function App() {
    return (
        <div className='container'>
            <img src={'https://www.hanse-haus.de/fileadmin/_processed_/7/b/csm_fertighaus-bauen-startseiten-bild_d13e0ec91d.jpg'} className='bg_image'/>
            <div className="svg-container">
    <svg width="100%" height="100%" viewBox={'0 0 1920 1200'} preserveAspectRatio="none">
        <a href={'https://www.google.de'}>
                    <polygon className="path"
                points="977,775,982,1032,1153,1025,1148,783"
                             stroke="blue"
                             strokeWidth={6}
                             fill='transparent'
                    />
        </a>
                </svg>
            </div>
        </div>



    );
}

export default App;

CSS:

* {
  margin: 0;
  padding: 0;
}

.container {

  position: relative;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.container > img.bg_image {
  width: 100%;
  height: auto;
}

.svg-container {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
svg {
  width: 100%;
  height: 100%;
}

.path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 5s linear forwards ;
}

@keyframes dash {

  to {
    stroke-dashoffset: 0;
  }
}