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>