在屏幕外循环播放 SVG 幻灯片动画而不会溢出

Question

如何阻止第二个绝对定位的 SVG 溢出？如果不可能的话，还有哪些其他方法可以实现呢？感谢任何帮助，谢谢。

JSFiddle： https://jsfiddle.net/art7bx2v/2/

Pseudo code of structure:

container
  svg 1
  svg 1 alt
container

  .svg-container {
  overflow: hidden;
}

.svg-odd {
  position: absolute;
  animation: slide 15s linear 0s infinite;
}

.svg-odd-alt {
  transform: translateX(-101%);
  animation: slideAlt 15s linear 0s infinite;
}

.svg-odd, .svg-odd-alt {
  width: 3840px;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideAlt {
  from {
    transform: translateX(-101%);
  }

  to {
    transform: translateX(0);
  }
}

Answer 1

将 position: relative 添加到 .svg-container。

Fiddle: https://jsfiddle.net/uszq6ky4/

之所以可行，是因为您的两个子元素有 position: absolute。当您应用 position: absolute（或 fixed）时，元素将相对于定位的父元素定位（默认的 static 除外）。

在屏幕外循环播放 SVG 幻灯片动画而不会溢出

Looping an SVG slide animation off screen without overflow

css

animation

svg

overflow