Изменение размера экрана перемещает SVG вокруг? - PullRequest
Новая
       12

Изменение размера экрана перемещает SVG вокруг?

0 голосов
/ 15 января 2020

Я использую «волну» 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 будет двигаться вверх или вниз

1 Ответ

1 голос
/ 15 января 2020

Правильное решение будет: 

* {
  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>
...