SVG椭圆形路径与窗口沿两个轴成比例地缩放，以形成圆形“选取框". [英] SVG oval path scaling proportionally with window along both axes for circular "marquee"

问题描述

我正在尝试创建一个椭圆形SVG路径，该路径要用作类似于 https://stackoverflow的动画文本路径.com/a/48354097/10727821 ，以创建一种圆形选取框"，该选取框始终占据浏览器窗口的整个宽度和高度，而忽略了宽高比.

I'm trying to create an oval SVG path that I want to use as an animated text path similar to https://stackoverflow.com/a/48354097/10727821 in order to create a sort of circular "marquee" that always takes full width and height of the browser window, ignoring the aspect ratio.

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

I guess the issue is that my <ellipse> is describing a perfect circle, whereas I'd want it to be more flexible than that – but I don't really know how I'd do that…

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

预期的输出将是这样的:

expected output would be something like this:

推荐答案

我希望这是您所需要的.我正在重新计算svg元素的viewBox和与wrap.clientWidth和wrap.clientHeight成比例的d路径，其中wrap是包装div <div id="wrap">.

I hope this is what you need. I'm recalculating the viewBox of the svg element and the d path proportional to the wrap.clientWidth and the wrap.clientHeight where wrap is the wrapping 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>

这篇关于SVG椭圆形路径与窗口沿两个轴成比例地缩放，以形成圆形“选取框".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！