如何在SVG的g标签内实现文本滚动且不超出指定区域

SVG原生不支持<marquee>标签，单纯给<g>或<text>加overflow属性也不会生效，得用裁剪路径+动画元素组合实现文本在指定矩形内滚动的效果，具体步骤和示例如下：

核心思路 #

1. 用<clipPath>定义滚动区域的矩形范围，超出这个范围的内容会被裁剪隐藏
2. 给需要滚动的文本添加<animate>动画，控制文本的位置偏移，实现循环滚动

横向滚动示例代码 #

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 1. 定义裁剪路径，对应你需要的显示矩形框 -->
  <clipPath id="scrollAreaClip">
    <rect x="20" y="20" width="360" height="60" />
  </clipPath>

  <!-- 2. 滚动文本容器，应用裁剪路径 -->
  <g clip-path="url(#scrollAreaClip)">
    <!-- 要滚动的文本，通过animate实现左移循环 -->
    <text x="400" y="60" font-size="24" fill="#333">
      这是一段超长的测试文本，需要在指定矩形框内滚动显示，避免内容超出区域
      <animate 
        attributeName="x" 
        from="400" 
        to="-650" 
        dur="12s" 
        repeatCount="indefinite" 
      />
    </text>
  </g>

  <!-- 可选：画出矩形框边框，方便确认区域 -->
  <rect x="20" y="20" width="360" height="60" fill="none" stroke="#999" stroke-width="1" />
</svg>

关键参数调整说明 #

• 裁剪区域：修改<clipPath>里<rect>的x/y/width/height，对应你指定的矩形框尺寸
• 滚动速度：调整<animate>的dur值，数值越小滚动越快
• 滚动范围：from是文本初始位置（要在裁剪区域右侧外），to是文本结束位置（要小于文本宽度的负数，确保能完全滚出区域）
• 纵向滚动：把<animate>的attributeName改成y，调整from和to的垂直坐标即可

动态适配文本长度（可选） #

如果文本长度不确定，用JS动态计算文本宽度，自动设置动画结束位置：

const textEl = document.querySelector('text');
const textWidth = textEl.getBBox().width;
const animateEl = textEl.querySelector('animate');
// 加40是让文本完全滚出后再重新开始，避免衔接生硬
animateEl.setAttribute('to', `-${textWidth + 40}`);

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