Css 从左到右（图像）平滑地设置内联svg动画，而不移动图像？

我正在尝试制作一个内嵌SVG图像的动画，演示上下波动。有一个图像，我必须动画它，使它看起来像船在波浪上航行

似乎做得不对，我们已经用translateX查看了转换，但是图像（SVG）正在移动。难道不可能在不移动图像的情况下，将波从左向右无限循环移动，并使其平滑吗

HTML

<div class="spinner">
      <img class="ship" src="./assets/ship.svg" />
      <span class="waves">
        <svg viewBox="0 0 146 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="Loader" stroke="none" stroke-width="1" fill="red" fill-rule="evenodd">
              <g id="Artboard-Copy" fill="red" fill-rule="nonzero">
              <g id="Group-Copy">
                      <path d="M0,5 C7.57597216,5 7.24715338,-9.32587341e-15 14.6,-9.32587341e-15 C21.9528466,-9.32587341e-15 21.9335777,5 29.2,5 C36.4664223,5 36.5256034,-9.04831765e-15 43.8,-9.32587341e-15 C51.0743966,-9.32587341e-15 51.2650965,5 58.4,5 C65.5349035,5 65.6270419,-9.04831765e-15 73,-9.32587341e-15 C80.3729581,-9.32587341e-15 80.2196466,5 87.6,5 C94.9803534,5 94.9224659,-9.32587341e-15 102.2,-9.32587341e-15 C109.477534,-9.32587341e-15 109.321471,5 116.8,5 C124.278529,5 124.275217,-9.32587341e-15 131.4,-9.32587341e-15 C138.524783,-9.32587341e-15 138.613807,5 146,5 L146,37 L0,37 L0,5 Z" id="Combined-Shape"></path>
                  </g>
              </g>
          </g>
      </svg>
    </span>      
</div>

---

请注意，波浪的颜色将更改为fill=inherit，等于灰色背景色。只是为了让你能看到它而已。

在这种情况下，你需要一个比viewBox宽度稍大的路径。在本例中，我使用的是viewBox=“0 0116.837”，而路径的宽度（使用

wave.getBBox（）

计算）为146个单位。为了了解发生了什么，请添加

overflow:visible到svg元素


svg{
外形：1px实心；
显示：块；
保证金：0自动；
/*溢出：可见*/
}
#挥手{
变换：translateX（0）；
动画：帆2s轻松进出无限；
}
@关键帧航行{
0% {
转换：translateX（0px）；
}
50% {
转换：translateX（-29.2px）；
}
100% {
转换：translateX（0px）；
}
}


.spinner {
  z-index: 3;
  position: absolute;
  left: 50%;
  border-radius: 100%;
  top: 50%;
  color: #ccc;
  margin-left: -40px;
  margin-top: -40px;
  padding: 0.5rem;

  .ship {
    animation: bop 0.58s ease-in-out alternate infinite;
    display: block;
    margin: auto;
    width: 80px;
    height: 80px;
  }

  .waves {
    position: absolute;
    width: 146px;
    height: 37px;
    margin-left: -40px;
    margin-top: -25px;
    animation: sail 6s linear infinite;
  }

  @keyframes bop {
    to {
      transform: translateY(-7%);
    }
  }

  @keyframes sail {
    to {
      transform: translateX(50px);
    }
  }