解决带动画SVG元素在小屏幕上的水平滚动问题

问题 #

着陆页中的SVG飞机飞行动画在全屏模式下运行正常，但切换到平板、手机等小屏幕时，会出现横向滚动条，屏幕右侧存在大片可滚动空白区域（动画仅包含上下方向运动）。

原因 #

1. SVG原始画布宽度极大（1131.53px），即使设置了width: 100%缩放到容器宽度，旋转动画会使元素的边界框宽度超出容器（旋转后元素的对角线长度大于原宽度），导致横向溢出视口。
2. 飞机容器未设置溢出裁剪规则，溢出部分直接暴露在页面中，触发横向滚动。

解决方案 #

步骤1：给飞机容器添加溢出裁剪 #

给.plane-container添加overflow: hidden，裁剪SVG旋转时超出容器的部分，避免溢出到页面：

.plane-container {
  width: 200px;
  z-index: 3;
  overflow: hidden; /* 新增：裁剪容器内溢出内容 */
}

步骤2：优化SVG的自适应行为 #

给SVG添加preserveAspectRatio="xMidYMid meet"，确保图形在容器中居中缩放，减少旋转时的横向溢出范围：

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  width="1131.53px"
  height="379.304px"
  viewBox="0 0 1131.53 379.304"
  preserveAspectRatio="xMidYMid meet" <!-- 新增：居中缩放 -->
  enable-background="new 0 0 1131.53 379.304"
  xml:space="preserve"
  class="plane"
>

步骤3：添加全局横向溢出兜底 #

给html和body添加overflow-x: hidden，作为最后一道防线，确保任何意外的横向溢出都被隐藏：

html,
body {
  background-color: #85b9dd;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden; /* 新增：隐藏横向溢出 */
}

修改后的完整代码 #

CSS #

html,
body {
  background-color: #85b9dd;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden; /* 隐藏横向溢出 */
}

* {
  position: relative;
}

svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.plane-container {
  width: 200px;
  z-index: 3;
  overflow: hidden; /* 裁剪容器内溢出内容 */
}

/*Paper Plane: Image*/
.plane {
  width: 100%;
  height: 60px;
}

/*Paper Plane: Animation*/
.plane-container {
  -webkit-animation: paper-plane-scoping 2s alternate infinite;
  -moz-animation: paper-plane-scoping 2s alternate infinite;
  animation: paper-plane-scoping 2s alternate infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes paper-plane-scoping {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    transform: translateY(100px);
  }
}

.plane {
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation: paper-plane-soaring 4s forwards infinite;
  -moz-animation: paper-plane-soaring 4s forwards infinite;
  animation: paper-plane-soaring 4s forwards infinite;
}
@-webkit-keyframes paper-plane-soaring {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  60% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.cloud {
  -webkit-animation-name: cloud-movement;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
  -moz-animation-name: cloud-movement;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;
  animation-name: cloud-movement;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

.slow {
  -webkit-animation-duration: 9.2s;
  -moz-animation-duration: 9.2s;
  animation-duration: 9.2s;
}

.slower {
  -webkit-animation-duration: 11.2s;
  -moz-animation-duration: 11.2s;
  animation-duration: 11.2s;
}

.slowest {
  -webkit-animation-duration: 13.5s;
  -moz-animation-duration: 13.5s;
  animation-duration: 13.5s;
}

.super-slow {
  -webkit-animation-duration: 20.5s;
  -moz-animation-duration: 20.5s;
  animation-duration: 20.5s;
}

@-webkit-keyframes cloud-movement {
  0% {
    opacity: 0.1;
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    transform: translateX(300px);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

HTML #

<div class="frame">
  <div class="plane-container">
    <a>
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        width="1131.53px"
        height="379.304px"
        viewBox="0 0 1131.53 379.304"
        preserveAspectRatio="xMidYMid meet"
        enable-background="new 0 0 1131.53 379.304"
        xml:space="preserve"
        class="plane"
      >
        <polygon
          fill="#D8D8D8"
          points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  "
        />
        <polygon
          fill="#C4C4C3"
          points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   "
        /></svg
    ></a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user23278485