求助：实现网站角落响应式Div内Arc upper弧形无限滚动文字横幅

核心实现方案 #

不用复杂的SVG配置，用CSS结合SVG的textPath实现弧形文字，再通过重复文字+CSS动画搞定无缝滚动，同时保证响应式适配。

1. HTML结构 #

先做一个固定在角落的响应式容器，里面嵌入SVG承载弧形文字，复制两份文字实现无缝滚动：

<div class="corner-banner">
  <svg viewBox="0 0 400 200" class="banner-svg">
    <!-- 定义对应PS Arc Upper +47%的弧形路径，可微调参数匹配效果 -->
    <path id="arc-path" d="M 50 150 Q 200 47 350 150" fill="none" />
    <!-- 第一组滚动文字 -->
    <text>
      <textPath href="#arc-path" startOffset="0%">
        你的横幅内容 · 你的横幅内容 · 你的横幅内容
      </textPath>
    </text>
    <!-- 第二组文字，用于无缝衔接，内容和第一组完全一致 -->
    <text>
      <textPath href="#arc-path" startOffset="100%">
        你的横幅内容 · 你的横幅内容 · 你的横幅内容
      </textPath>
    </text>
  </svg>
</div>

2. CSS样式与动画 #

设置容器固定位置、响应式尺寸，给文字添加无限滚动动画：

/* 角落固定容器，响应式缩放 */
.corner-banner {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 30vw;
  max-width: 400px;
  min-width: 250px;
}

.banner-svg {
  width: 100%;
  height: auto;
}

/* 弧形文字样式 */
text {
  fill: #2d2d2d;
  font-size: 16px;
  font-weight: 600;
  /* 动画：无限向左滚动 */
  animation: scrollArcText 12s linear infinite;
}

@keyframes scrollArcText {
  100% {
    transform: translateX(-100%);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  text {
    font-size: 12px;
  }
}

3. 匹配PS弧形参数 #

如果当前弧度和PS的Arc Upper +47%有偏差，调整SVG路径里的贝塞尔控制点：

• 路径里的Q 200 47是核心控制点，Y值47对应你要的47%弧度，微调这个值（比如45-50）可以精准匹配PS效果
• 起点M 50 150和终点350 150控制弧形的宽度，可根据容器大小调整

关键注意点 #

• 必须复制两份文字，否则滚动到末尾会出现空白，无法实现无缝衔接
• SVG的viewBox属性保证缩放时文字弧度比例不变，适配不同屏幕尺寸
• 动画时长12s可根据文字长度调整：文字越长，时长设得越久，滚动速度越自然

内容的提问来源于stack exchange，提问作者arihel0