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

我希望这是您所需要的。我正在重新计算svg元素的viewBox和与wrap.clientWidth和wrap.clientHeight成比例的d路径，其中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>