** Installing R Package Dependencies for R Markdown: 'rmarkdown','stringi'
[1/2] Installing rmarkdown...
trying URL 'http://cran.rstudio.com/src/contrib/rmarkdown_2.9.tar.gz'
Content type 'application/x-gzip' length 3246617 bytes (3.1 MB)
================================================[2/2] Installing stringi...

downloaded 3.0 MB

Error in download.file(url,destfile,method,mode = "wb",...) : 
  download from 'http://cran.rstudio.com/src/contrib/rmarkdown_2.9.tar.gz' failed
In addition: Warning messages:
1: In download.file(url,...) :
  downloaded length 3152276 != reported length 3246617

2: In download.file(url,...) :
  URL 'http://cran.rstudio.com/src/contrib/rmarkdown_2.9.tar.gz': Timeout of 60 seconds was reached

Warning in download.packages(pkgs,destdir = tmpd,available = available,:
  download of package ‘rmarkdown’ failed

trying URL 'http://cran.rstudio.com/bin/macosx/contrib/4.1/stringi_1.7.3.tgz'
Content type 'application/x-gzip' length 14636855 bytes (14.0 MB)

=========
downloaded 2.7 MB

Error in download.file(url,...) : 
  download from 'http://cran.rstudio.com/bin/macosx/contrib/4.1/stringi_1.7.3.tgz' failed
In addition: Warning messages:
1: In download.file(url,...) :
  downloaded length 2835937 != reported length 14636855

2: In download.file(url,...) :
  URL 'http://cran.rstudio.com/bin/macosx/contrib/4.1/stringi_1.7.3.tgz': Timeout of 60 seconds was reached
Warning in download.packages(pkgs,:
  download of package ‘stringi’ failed

我相信这就是您想要做的：CodePen。

问题在于 HTML 将 SVG 视为任何其他标签，并尝试按照定义元素的顺序将其放在屏幕上。

为了将一个元素与另一个元素重叠，您必须使用 * { margin: 0%; padding: 0%; } svg { position: absolute; top: 100px; left: 0; } .header-container { width: 100%; height: 1000px; } .header-top { width: 100%; height: 50%; background-color: #3C8DAD; } .header-bottom { width: 100%; height: 50%; background-color: #F5A962; } css 属性，在这种情况下，我制作了它 position 然后定义了位置，这可以正常工作，因为您有容器的固定高度。

不太确定您的最终目标，但根据您的情况，您可以在 svg 上重置显示或垂直对齐，只需将蓝色背景设置为父容器。 那不是真正的答案，而是带有演示的评论也要求您澄清您的最终用途。 SVG 也可以通过渐变发送到背景。

来自您的代码和小的 CSS 修改：

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  background-color: #3C8DAD;
}

.header-top {
  width: 100%;
  height: 50%;
}

svg {
  vertical-align: top;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #F5A962;
}

<div class="header-container">
  <div class="header-top"></div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,1152,176C1248,160,1344,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320C1056,960,320C768,672,320C480,384,320C192,96,48,320L0,320Z"></path>
            </svg>
  <div class="header-bottom">
  </div>
</div>

将高度设置为 1000 像素 + 2 个高度为 50% 的容器并放置一个 svg，这可能不是您想要的 ;)，至少对于标记的可能使用而言

我认为你必须消除svg文件的边框

我没有完全得到你需要的东西，但我认为像 this.

试试这种风格

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  position: relative;
}

.header-top {
  width: 100%;
  height: 50%;
  background-color: #3c8dad;
  position: relative;
}

svg {
  position: absolute;
  bottom: 0;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #f5a962;
  position: absolute;
  bottom: 0;
}

使用这个 HTML

<div class="header-container">
  <div class="header-top">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#F5A962" fill-opacity="1" d="M0,320Z"></path>
    </svg>
  </div>

  <div class="header-bottom"></div>
</div>