SVG无限无缝滚动实现求助：overflow失效与无缝循环问题

效果对比 #

GIF效果：

SVG实现（待修复）：

原代码 #

CSS代码

.barsBox
{
  overflow: hidden;
  display: flex;
  width: 108px;
  margin: 0 auto;
}

.bars
{
  animation: scroll 0.7s steps(7) infinite;
}

@keyframes scroll
{
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(108px, 0, 0);
  }
}

HTML代码

GIF:
<img src="https://i.sstatic.net/La7ZE.gif">
SVG:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145" viewBox="0 0 145 109" shape-rendering="crispEdges">
  <g id="bg">
    <image xlink:href="https://i.sstatic.net/eZGeS.png"/>
  </g>
  <g class="barsBox">
    <g class="bars">
      <path fill="#f9f9f9" d="M17.999 4.961h14.729v64.476H17.999zM110.39 69.437h15.622v8.56H110.39z"/>
      <path fill="#ff0" d="M32.728 4.961h16.068v64.476H32.728z"/>
      <path fill="#0ff" d="M48.796 4.961h15.622v64.476H48.796zM79.593 69.437h14.952v8.56H79.593z"/>
      <path fill="#0f0" d="M64.418 4.961h15.175v64.476H64.418z"/>
      <path fill="#f0f" d="M79.593 4.961h14.952v64.476H79.593zM48.796 69.437h15.622v8.56H48.796z"/>
      <path fill="red" d="M94.545 4.961h15.845v64.476H94.545z"/>
      <path fill="#00f" d="M110.39 4.961h15.622v64.476H110.39zM17.999 69.437h14.729v8.56H17.999z"/>
      <path fill="#090909" d="M32.728 69.437h16.068v8.56H32.728zM64.418 69.437h15.175v8.56H64.418zM94.545 69.437h15.845v8.56H94.545z"/>
    </g>
  </g>
</svg>

问题解决 #

1. 修复overflow: hidden不生效的问题

SVG中的<g>元素不支持CSS的overflow属性，要实现裁剪效果，需要改用<svg>元素作为容器（SVG原生支持overflow）。

修改方案：

• 将.barsBox对应的<g>替换为<svg>，设置宽高、位置和overflow:hidden
• 移除CSS中的display: flex（SVG容器无需该属性）

调整后的CSS：

.barsBox
{
  overflow: hidden;
  width: 108px;
  height: 78px;
  margin: 0 auto;
}

调整后的HTML容器部分：

<svg class="barsBox" x="18" y="0" width="108" height="78" viewBox="0 0 108 78" overflow="hidden">
  <g class="bars">
    <!-- 原路径内容不变 -->
  </g>
</svg>

2. 实现无缝循环滚动

要实现无缝滚动，需要让滚动元素的内容是完整重复一次的条形组，这样动画结束时，重复的内容刚好衔接开头。

具体操作：

• 复制.bars里的所有路径，将复制的路径整体向右偏移108px（等于可视区域宽度）
• 调整动画方向为向左移动108px，这样动画结束时，复制的内容刚好完全进入可视区域，和原内容开头一致

调整后的动画CSS：

@keyframes scroll
{
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-108px, 0, 0);
  }
}

完整修复后代码 #

CSS

.barsBox
{
  overflow: hidden;
  width: 108px;
  height: 78px;
  margin: 0 auto;
}

.bars
{
  animation: scroll 0.7s steps(7) infinite;
}

@keyframes scroll
{
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-108px, 0, 0);
  }
}

HTML

GIF:
<img src="https://i.sstatic.net/La7ZE.gif">
SVG:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145" viewBox="0 0 145 109" shape-rendering="crispEdges">
  <g id="bg">
    <image xlink:href="https://i.sstatic.net/eZGeS.png"/>
  </g>
  <svg class="barsBox" x="18" y="0" width="108" height="78" viewBox="0 0 108 78" overflow="hidden">
    <g class="bars">
      <!-- 原路径组 -->
      <path fill="#f9f9f9" d="M17.999 4.961h14.729v64.476H17.999zM110.39 69.437h15.622v8.56H110.39z"/>
      <path fill="#ff0" d="M32.728 4.961h16.068v64.476H32.728z"/>
      <path fill="#0ff" d="M48.796 4.961h15.622v64.476H48.796zM79.593 69.437h14.952v8.56H79.593z"/>
      <path fill="#0f0" d="M64.418 4.961h15.175v64.476H64.418z"/>
      <path fill="#f0f" d="M79.593 4.961h14.952v64.476H79.593zM48.796 69.437h15.622v8.56H48.796z"/>
      <path fill="red" d="M94.545 4.961h15.845v64.476H94.545z"/>
      <path fill="#00f" d="M110.39 4.961h15.622v64.476H110.39zM17.999 69.437h14.729v8.56H17.999z"/>
      <path fill="#090909" d="M32.728 69.437h16.068v8.56H32.728zM64.418 69.437h15.175v8.56H64.418zM94.545 69.437h15.845v8.56H94.545z"/>
      <!-- 偏移108px的复制路径组 -->
      <path fill="#f9f9f9" d="M125.999 4.961h14.729v64.476H125.999zM218.39 69.437h15.622v8.56H218.39z"/>
      <path fill="#ff0" d="M140.728 4.961h16.068v64.476H140.728z"/>
      <path fill="#0ff" d="M156.796 4.961h15.622v64.476H156.796zM187.593 69.437h14.952v8.56H187.593z"/>
      <path fill="#0f0" d="M172.418 4.961h15.175v64.476H172.418z"/>
      <path fill="#f0f" d="M187.593 4.961h14.952v64.476H187.593zM156.796 69.437h15.622v8.56H156.796z"/>
      <path fill="red" d="M202.545 4.961h15.845v64.476H202.545z"/>
      <path fill="#00f" d="M218.39 4.961h15.622v64.476H218.39zM125.999 69.437h14.729v8.56H125.999z"/>
      <path fill="#090909" d="M140.728 69.437h16.068v8.56H140.728zM172.418 69.437h15.175v8.56H172.418zM202.545 69.437h15.845v8.56H202.545z"/>
    </g>
  </svg>
</svg>

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