SVG горизонтальная линия между фоном

Question

.left-wave-container {
  line-height: 0 !important;
  width: 100%;
  height: 100%;
}

.container {
  width: 100vw;
  height: 50vh;
  background: #2196f3;
}

<div className="left-wave-container">

    <div className="svg-container">
      <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="430" viewBox="0 0 1280 430"><path d="M0,465V35A96.575,96.575,0,0,0,.64,46.15,94.294,94.294,0,0,0,2.56,56.94C15.71,112.271,78.9,153.52,171,186.521v.159c116.77,41.85,280,70.44,446.67,97.681,6,1,12,2,18,2.93C682.9,295,730.32,302.6,776.9,310.43c3.73.61,7.45,1.25,11.16,1.87,2.72.46,5.431.93,8.131,1.37l7.59,1.291,2.05.35c5.07.869,10.139,1.74,15.179,2.62C890.64,330,957.62,342.71,1018.56,357c5.45,1.29,10.86,2.569,16.21,3.88q13.49,3.28,26.54,6.7,7.53,2,14.9,4l1.2.329c5.65,1.53,11.2,3.1,16.691,4.691,1.2.329,2.36.68,3.54,1,81,23.559,145.33,51.53,182.08,86.95l.28.26V465Z" transform="translate(0 -35)" fill="#2196f3"/>
      </svg>
    </div>

    <div className="container">
    </div>

</div>

Я пытаюсь собрать один заголовок svg с волной с тем же цветом фона, что и у него, но внизу в спецификациях размеров области просмотра одна строкаотображается между ними.

Любопытно, что когда я не изменяю ширину высоты в CSS или непосредственно в svg, горизонтальная линия исчезает, но она просто имеет размер, а в начале, нет полногоокно просмотра (я понимаю это, когда загружаю фрагмент).

Спасибо, что прочитали!

Answer 1

Нарисовал вашу волну в Inkscape

Удален SVG из разметки width =" 1280" height ="430"

Теперь приложение будет адаптивным при любом разрешении экрана.

Стили не работали, потому что <div className =" container ">

правильно записали <div class =" container ">

.left-wave-container {
    width: 100%;
  height: 100%;
  line-height: 0 !important;
}

.container {
  width: 100%;
  height: 100%;
  background: #2196f3;
}

<div class="left-wave-container">

    <div class="svg-container">
      <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1280 430">
	  <path d="m2.7 20.4c-1.2-35.4-1.3 4.9 17.7 35.5 19.1 30.6 57.4 52.9 91.9 68.1 130.2 56.1 261.7 80.2 377.8 101.5 187.9 32.6 388.1 61.4 560.4 103 39.4 9.7 74.8 18.1 117.1 33.6 37.9 13.9 135.6 67.5 100.7 67.1C995.4 425.3 1.6 425.3 1.6 425.3c0 0 2.1-377.7 1.2-404.9z" transform="translate(0 5)"  fill="#2196f3" stroke="#2196f3" stroke-width="10"/>
      </svg>
    </div>

    <div class="container">
    </div>

</div>