html - 屏幕调整大小移动svg？

Question

我使用“wave” svg，但如果我调整屏幕大小，它会四处移动。

* {
  margin: 0;
  padding: 0;
}

#block {
  height: 800px;
  background:green;
}

#first, #second {
  height: 400px;
  position:relative;
  width:100%;
}

#first {
  background:red;
}

#second {
  background:blue;
}

#svgBox {
  width:100%;
  position:relative;
  top:-170px;
}

.wave {
  width: 100%;
}

<div id="block">
  <div id="first"></div>
  <div id="second">
    <div id="svgBox">
      <svg class="wave" viewBox="0 0 1440 320">
        <path fill="blue" fill-opacity="1" d="M0,64L60,96C120,128,240,192,360,213.3C480,235,600,213,720,197.3C840,181,960,171,1080,186.7C1200,203,1320,245,1380,266.7L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
      </svg>
    </div>
  </div>
</div>

如何解决这个问题？我希望如果您调整屏幕大小，svg 仍然在正确的位置。

问题：如果调整屏幕大小，svg 会向上或向下移动

标签： htmlcsssvgresizeposition

Answer 1

正确的解决方案是：

* {
  margin: 0;
  padding: 0;
  font-size:0;
}

#block {
  height: 800px;
  background:green;
}

#first, #second {
  height: 400px;
  position:relative;
  width:100%;
}

#first {
  background:red;
}

#second {
  background:blue;
}

.wave {
  position:absolute;
  bottom: 0;
  height:auto;
  width: 100%;
}

<section id="block">
  <div id="first">
    <svg class="wave" viewBox="0 0 1440 320">
        <path fill="blue" fill-opacity="1" d="M0,64L60,96C120,128,240,192,360,213.3C480,235,600,213,720,197.3C840,181,960,171,1080,186.7C1200,203,1320,245,1380,266.7L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    </svg>
  </div>
  <div id="second"></div>
</section>