将 <path> 元素移动到其容器的底部

Question

我正在尝试移动 svg 使其与我的 header 背景底部齐平 like this (this is from my Figma design) but so far I'm unable to cover this bottom portion 背景与 svg。

包含 svg 的 div 在 very bottom of it's container so its just the path element that needs to be moved

到目前为止，我已经尝试使用 div.formatSvg > svg { margin-top: auto; } 设置 svg 的格式，我知道我可以将 svg 的位置设置为相对位置并使用 top: Npx; 将其移动到位但是使 svg 变为 overlap the sidebar.

我最后的想法是编辑 svg 本身，因为底部可能有额外的 space 导致了这个问题，但我对此表示怀疑。

相关HTML

      <div class="headerBg">
        <h1 class="headerText">Lorem Ipsum</h1>
        <div class="formatSvg">
          <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
              fill-opacity="1"></path>
          </svg>
        </div>
      </div>

相关CSS

main {
    margin-left: 5rem;
    padding: 1rem;
    padding: 0;
    margin: 0;
}

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
}

.formatSvg {
    margin-top: auto;
}

Answer 1

SVG 默认为 display: inline-block。就像 <img>。因此，与其他图像一样，它们位于文本的基线上。因此，您看到的差距是浏览器为 descenders.

保留的 space

解决方法是将 SVG 更改为 display: block。

我还添加了一个 justify-content: space-between; 到 headerBg 以强制 <h1> 到顶部，formatSvg 到底部。你的 30em 身高 div。您可能不需要在最后一页中使用这一点。

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formatSvg svg {
    display: block;
}

<div class="headerBg">
  <h1 class="headerText">Lorem Ipsum</h1>
  <div class="formatSvg">
    <svg data-name="Layer 1" viewBox="0 0 1200 120" preserveAspectRatio="none">
      <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
        fill-opacity="1"></path>
    </svg>
  </div>
</div>

将 <path> 元素移动到其容器的底部

Move the <path> element to the bottom of its container

html

css

svg