css - 在不移动图像的情况下平滑地从左到右(图像)动画内联 svg？

Question

我正在尝试制作一个内联 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>

CSS

.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);
    }
  }

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

Answer 1

在这种情况下，您将需要比 viewBox 宽度稍大的路径。在本例中，我使用的是 viewBox="0 0 116.8 37"，而您的路径宽度(使用 wave.getBBox() 计算)为 146 个单位。为了理解发生了什么，请将 overflow: visible; 添加到 svg 元素。

svg {
  outline: 1px solid;
  display: block;
  margin: 0 auto;
  /*overflow: visible;*/
}
#wave {
  transform: translateX(0);
  animation: sail 2s  ease-in-out infinite;
}
@keyframes sail {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-29.2px);
  }
  100% {
    transform: translateX(0px);
  }
}

<svg viewBox="0 0 116.8 37" width="200">
        <path fill="red" 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="wave"></path>
</svg>