求助：如何实现沿SVG路径无限滚动的文本跑马灯？文本不显示

文本不显示的常见原因及修复 #

• 路径引用错误：<textPath>必须通过href（或兼容旧浏览器的xlink:href）正确关联路径的id，拼写必须完全一致
• 文本不可见：检查文本颜色是否和背景色重叠，字号是否过小，或者被SVG视口裁剪
• 路径定位问题：如果路径本身在视口外，文本自然也会被隐藏，可以临时给路径加stroke="red"确认位置

可运行的无限滚动SVG跑马灯示例 #

<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 隐藏路径，仅用于文本排版 -->
  <path id="scrollPath" d="M50,100 C150,50 450,50 550,100" fill="none" stroke="none"/>

  <!-- 滚动文本 -->
  <text font-size="24" fill="#333">
    <textPath href="#scrollPath" startOffset="100%">
      <!-- 重复内容确保滚动无缝衔接 -->
      <tspan id="marqueeText">SVG路径跑马灯 · 无限滚动效果 · SVG路径跑马灯 · 无限滚动效果</tspan>
    </textPath>
  </text>

  <!-- 无限滚动动画 -->
  <animate
    href="#marqueeText"
    attributeName="startOffset"
    from="100%"
    to="-100%"
    dur="10s"
    repeatCount="indefinite"
  />
</svg>

关键实现细节 #

1. 无缝滚动核心：文本内容重复至少一次，当第一部分文本滚出路径左侧时，第二部分刚好衔接上来
2. 动画逻辑：通过修改startOffset属性，让文本从路径右侧外（100%）滚动到左侧外（-100%），循环执行实现无限滚动
3. 兼容性处理：如果旧浏览器不支持href，可以替换为xlink:href，同时在SVG根标签添加xmlns:xlink="http://www.w3.org/1999/xlink"

调试技巧 #

• 临时给路径添加stroke="red"，确认路径是否在SVG视口内
• 单独写一个不带<textPath>的<text>标签，确认文本本身能正常显示
• 打开浏览器开发者工具的控制台，检查是否有SVG语法错误

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