在做出响应时遇到问题

Question

我正在尝试在屏幕中间放置一个椭圆形并用椭圆形选取框文本围绕它。

由于某种原因，椭圆形选取框文本没有遵循 SVG 路径，而是变成了一个普通的圆圈！我想让它比图像大一点，同时它仍然是椭圆形并且响应迅速。

喜欢：椭圆 = 图片 * 1.2

我附上代码：

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} 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);
  let path_length = thePath.getTotalLength();


  //begin at a bigger size than needed
  let font_size = 100;
  ellipse.style.fontSize = font_size + "px";

  // while the text length is bigger than half path length 
  while (tp.getComputedTextLength() > path_length / 2) {
    //reduce the font size
    font_size -= .50;
    //reset the font size 
    ellipse.style.fontSize = font_size + "px";
  }
}



window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 0);

let so = 0;

function Marquee() {
  requestAnimationFrame(Marquee);
  tp.setAttributeNS(null, "startOffset", so + "%");
  if (so >= 50) {
    so = 0;
  }
  so += 0.3;
}

Marquee();

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  font-family: "Arimo", sans-serif;
}

.pes
{
  width: 50%;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 59;
}

text {
  text-transform: uppercase;
  font-weight: lighter;
  color: white;
}

.rotating-img-10 {
  width: 40%;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 49;
}

.rotating-img-10: after {
  padding-bottom: 100%;
  display: block;
}

<div class="pes" id="wrap">
      <svg id="ellipse" class="sv" version="1.1" viewBox="0 0 1000 1000">
        <path id="thePath" class="sve" fill="transparent" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500 A400,400 0 0 0 900 500 A400,400 0 0 0 100 500" />
        <text fill="#000">
          <textPath xlink:href="#thePath" dy="5" id="tp" lengthAdjust="spacing" class="svd">● i'm a beatuiful placeholder for what you need and i'm rotating for no reason! can someone help me?</textPath>
        </text>
      </svg>
</div>


<img class="rotating-img-10" src="https://raw.githubusercontent.com/emdesigner-or/MOONLIGHT-2021/main/ezgif.com-gif-maker.webp" alt="rotated-image">

Answer 1

你的svg是正方形的，你需要把它拉长一点。 transform:scale(1,1.x) 可以提供帮助

可能的例子：

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} 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);
  let path_length = thePath.getTotalLength();


  //begin at a bigger size than needed
  let font_size = 100;
  ellipse.style.fontSize = font_size + "px";

  // while the text length is bigger than half path length 
  while (tp.getComputedTextLength() > path_length / 2) {
    //reduce the font size
    font_size -= .50;
    //reset the font size 
    ellipse.style.fontSize = font_size + "px";
  }
}



window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 0);

let so = 0;

function Marquee() {
  requestAnimationFrame(Marquee);
  tp.setAttributeNS(null, "startOffset", so + "%");
  if (so >= 50) {
    so = 0;
  }
  so += 0.1;
}

Marquee();

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  font-family: "Arimo", sans-serif;
}

.pes
{
  width: 50%;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 59;
}

text {
  text-transform: uppercase;
  font-weight: lighter;
  color: white;
}

.rotating-img-10 {
  width: 40%;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 49;
}

.rotating-img-10: after {
  padding-bottom: 100%;
  display: block;
}
svg {transform:scale(1.1,1.24)}

<div class="pes" id="wrap">
      <svg id="ellipse" class="sv" version="1.1" viewBox="0 0 1000 1000">
        <path id="thePath" class="sve" fill="transparent" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500 A400,400 0 0 0 900 500 A400,400 0 0 0 100 500" />
        <text fill="#000">
          <textPath xlink:href="#thePath" dy="5" id="tp" lengthAdjust="spacing" class="svd">● i'm a beatuiful placeholder for what you need and i'm rotating for no reason! can someone help me?</textPath>
        </text>
      </svg>
</div>


<img class="rotating-img-10" src="https://raw.githubusercontent.com/emdesigner-or/MOONLIGHT-2021/main/ezgif.com-gif-maker.webp" alt="rotated-image">

要向内或向外旋转更多，请增加两个比例值，保持 1:1.1 的平均比率。

在做出响应时遇到问题

Having problem to make something responsive

css

responsive