css - SVG 椭圆路径与沿两个轴的窗口成比例缩放，用于圆形“选框”

Question

我正在尝试创建一个椭圆形 SVG 路径，我想将其用作类似于https://stackoverflow.com/a/48354097/10727821的动画文本路径，以创建一种始终占用完整的圆形“选框”浏览器窗口的宽度和高度，忽略纵横比。

我想问题是我<ellipse>正在描述一个完美的圆，而我希望它比这更灵活——但我真的不知道我该怎么做……</p>

.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>

预期的输出将是这样的：

标签： csssvg

Answer 1

我希望这是你需要的。我正在重新计算 svg 元素的 viewBox 和与 div 成比例的 d 路径wrap.clientWidth以及包装 div的wrap.clientHeight位置。wrap<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>