Создание гладкой синусоидальной волны с анимацией CSS и рабочим SVG для кого-то другого, но не для моего SVG?

Question

Анимация проблемы (их против моей). Больше контекста ниже:

Я получил некоторый код из JSFiddle, и он выглядит следующим образом: HTML:

<article id="main">
    <div class="ocean">
        <div class="wave"></div>
    </div>
</article>

CSS:

.ocean { 
    height: 5%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    background: #015871;
  }

  .wave {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
    position: absolute;
    width: 6400px;
    top:-198px;
    height:198px;
    animation: wave 2s linear infinite;
  }


  @keyframes wave {
    100% {
      margin-left: -1600px;
    }
  }

  article{
      width:100%;
      height:100vh;
  }

Теперь у меня точно такой же код, но я изменил исходный код на svg, который я сделал, изменив атрибут 'background' в '.wave 'class следующим образом:

background: url("...\my_svg.svg");

Тогда вот код для этого SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 65">
    <defs>
        <style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
    </defs>
    <title>bkg-side</title>
    <g id="Layer_1" data-name="Layer 1">
        <path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
    </g>
</svg>

Теперь, как вы увидите, есть плавный переход для svg, которым я являюсь используя и не очень плавный переход с SVG, который я сделал. Они будут бесконечно прокручиваться в сторону или, по крайней мере, будут выглядеть так, как моя, «сбросится» через заданное количество времени для анимации (в данном случае 5 секунд). Единственная разница в коде заключается в том, какой SVG используется, и я понятия не имею, почему их SVG будет бесконечно прокручиваться в сторону и будет выглядеть как плавная кривая, в то время как в моем случае он сбрасывается и прерывается каждые 5 секунд. Имеет ли это какое-то отношение к самому SVG-коду?

РЕДАКТИРОВАТЬ: концы соприкасаются друг с другом, образуя согласованную кривую с обоими изображениями, и я поместил свое изображение в верхний левый угол Illustrator и нажмите «Экспорт выбора ...». Постоянство есть, но с этим, волна продолжается без сброса, в то время как шахта сбрасывается с начала.

Answer 1

Основываясь на комментариях Пола и сравнивая файлы svg, я обнаружил, что у THEIR svg нет атрибута viewbox и атрибута ширины, в то время как у моего DID есть атрибут viewbox и нет атрибута ширины. Я установил в качестве значения поля margin-left в анимации @ key-frames и presto!

Мой старый svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 65">
    <defs>
        <style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
    </defs>
    <title>bkg-side</title>
    <g id="Layer_1" data-name="Layer 1">
        <path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
    </g>
</svg>

Мой новый svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="66">
    <defs>
        <style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
    </defs>
    <title>bkg-side</title>
    <g id="Layer_1" data-name="Layer 1">
        <path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
    </g>
</svg>

Answer 2

Это потому, что ваша волна находится в середине большого SVG, с пространством вокруг него. Принимая во внимание, что они занимают всю ширину SVG.

Когда вы repeat-x их, левый и правый края каждого повтора встречаются. У вас большие пробелы слева и справа.

Вам нужно переместить форму волны к левому краю SVG и обрезать размер страницы, чтобы соответствовать ширине.