Овальный путь SVG масштабируется пропорционально окну по обеим осям для кругового "выделения"

Question

Я пытаюсь создать овальный SVG-путь, который я хочу использовать в качестве анимированного текстового пути, похожего на https://stackoverflow.com/a/48354097/10727821, чтобы создать своего рода круговую "область", которая всегда принимает полную ширину и высотуокно браузера, игнорируя соотношение сторон.

Полагаю, проблема в том, что мой <ellipse> описывает идеальный круг, тогда как я бы хотел, чтобы он был более гибким, но я не оченьзнаю, как бы я это сделал ...

.ellipse {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
  ellipse {
    fill: #333;
  }
}

<div class="ellipse">
<svg version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<ellipse cx="500" cy="500" rx="500" ry="500"/>
</svg>
</div>

ожидаемый результат будет примерно таким:

Answer 1

Надеюсь, это то, что вам нужно.Я пересчитываю viewBox элемента svg и путь d, пропорциональный wrap.clientWidth и wrap.clientHeight, где wrap - это div обтекания <div id="wrap">.

function Init(){
  let w = wrap.clientWidth;
  let h = wrap.clientHeight;
  ellipse.setAttributeNS(null,"viewBox",`0 0 ${w}  ${h}`);
  let d = `M${w/10},${h/2}A${4*w/10},${4*h/10} 0 0 0 ${9*w/10} ${5*h/10} A${4*w/10},${4*h/10} 0 0 0 ${w/10} ${5*h/10}`

thePath.setAttributeNS(null,"d", d)
}


window.setTimeout(function() {
  Init();
  window.addEventListener('resize', Init, false);
}, 15);

#wrap{width:100vw; height:100vh}
  svg {
    background:#eee;
  }

<div id="wrap">
<svg id="ellipse" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none">  
<path id="thePath" fill="gold" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500"  />
  
  
   <text stroke="#000000" font-size="20">
      <textPath xlink:href="#thePath" dy="5">
            svg oval path scaling proportionally with window along both axes for circular svg oval path scaling proportionally with window along both axes for circular svg oval path scaling proportionally with window along both axes for circular
      </textPath>
    </text>
</svg>
</div>