Question

我正在尝试制作内嵌SVG图像的动画，以说明上下波动。在需要动画的地方有一个图像，使它看起来像船在波浪中航行。

似乎不能做对，已经看过带有transformX的转换，但是图像（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个单位。为了了解会发生什么，请在svg元素中添加overflow: visible;。

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>

在不移动图像的情况下从左到右（图像）平滑地内联svg动画？

1 个答案: