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。

提琴：https://jsfiddle.net/uszq6ky4/

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

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

1 个答案: