Сделать SVG подходящей ширины родительских контейнеров

Question

Я сейчас пытаюсь создать волновую анимацию, однако я не понимаю, как подогнать ширину элемента пути к ширине SVG. Ширина SVG составляет 200% от области просмотра, а ширина элементов пути равна 100%. Однако я хочу, чтобы элемент path тоже имел ширину 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

вы пропустили параметр viewBox на svg

, изменил только 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>