html - 使 SVG 适合父容器宽度

Question

我目前正在尝试创建波浪动画，但是我不知道如何使路径元素的宽度适合 SVG 宽度。 SVG 宽度为视口(viewport)的 200%，路径元素宽度为 100%。但是我希望路径元素也有 200% 的宽度，这样动画适合整个屏幕。

https://jsfiddle.net/r8o9gjsk/1/

或

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}

.waveWrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveMiddle {
  background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner">
    <div class="wave waveMiddle">
      <svg width="100%">
            <path width="100%" height="100%"
                  d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
          </svg>
    </div>
  </div>
</div>

Answer 1

您在 svg 上缺少 viewBox 参数

只改变了viewBox:

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}

.waveWrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveMiddle {
  background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner">
    <div class="wave waveMiddle">
      <svg width="100%" viewBox="0 0 1600 200">
            <path width="100%" height="100%"
                  d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
          </svg>
    </div>
  </div>
</div>