SVG 的无限无缝滚动部分

问题描述 投票:0回答:1

我正在尝试在 SVG 中复制此 GIF:

.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);
  }
}
GIF:
<img src="https://i.stack.imgur.com/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.stack.imgur.com/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. overlow: hidden
    中的
    .barsBox
    不起作用,由于某种原因,整个元素与其子元素一起移动
  2. 如何让它“包裹”条形,使其无缝循环?
css svg svg-animate
1个回答
0
投票

感谢@enxaneta指出了正确的方向,这里是任何感兴趣的人的工作代码。

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

@keyframes scroll
{
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(108px, 0, 0);
  }
}
GIF:
<img src="https://i.stack.imgur.com/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.stack.imgur.com/eZGeS.png"/>
  </g>
  <clipPath id="barsClip">
    <rect x="17.999" y="4.961" width="108" height="73.036"/>
  </clipPath>
  <defs>
    <g id="bars">
      <path fill="#f9f9f9" d="M17.999 4.961h15.428v64.476H17.999zM110.567 69.437h15.428v8.56H110.567z"/>
      <path fill="#ff0" d="M33.427 4.961h15.428v64.476H33.427z"/>
      <path fill="#0ff" d="M48.855 4.961h15.428v64.476H48.855zM79.711 69.437h15.428v8.56H79.711z"/>
      <path fill="#0f0" d="M64.283 4.961h15.428v64.476H64.283z"/>
      <path fill="#f0f" d="M79.711 4.961h15.428v64.476H79.711zM48.855 69.437h15.428v8.56H48.855z"/>
      <path fill="red" d="M95.139 4.961h15.428v64.476H95.139z"/>
      <path fill="#00f" d="M110.567 4.961h15.428v64.476H110.567zM17.999 69.437h15.428v8.56H17.999z"/>
      <path fill="#090909" d="M33.427 69.437h15.428v8.56H33.427zM64.283 69.437h15.428v8.56H64.283zM95.139 69.437h15.428v8.56H95.139z"/>
      <!--extra bars to the left-->
      <path fill="#f9f9f9" d="M-89.997 4.961h15.428v64.476H-89.997zM2.571 69.437h15.428v8.56H2.571z"/>
      <path fill="#ff0" d="M-74.569 4.961h15.428v64.476H-74.569z"/>
      <path fill="#0ff" d="M-59.141 4.961h15.428v64.476H-59.141zM-28.285 69.437h15.428v8.56H-28.285z"/>
      <path fill="#0f0" d="M-43.713 4.961h15.428v64.476H-43.713z"/>
      <path fill="#f0f" d="M-28.285 4.961h15.428v64.476H-28.285zM-59.141 69.437h15.428v8.56H-59.141z"/>
      <path fill="red" d="M-12.857 4.961h15.428v64.476H-12.857z"/>
      <path fill="#00f" d="M2.571 4.961h15.428v64.476H2.571zM-89.997 69.437h15.428v8.56H-89.997z"/>
      <path fill="#090909" d="M-74.569 69.437h15.428v8.56H-74.569zM64.283 69.437h15.428v8.56H64.283zM-12.857 69.437h15.428v8.56H-12.857z"/>
    </g>
  </defs>
  <use clip-path="url(#barsClip)" href="#bars"/>
</svg>

© www.soinside.com 2019 - 2024. All rights reserved.