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

【问题标题】：Move the <path> element to the bottom of its container将 <path> 元素移动到其容器的底部
【发布时间】：2021-12-16 15:18:44
【问题描述】：

我正在尝试移动一个 svg，使其与我的标题背景底部 like this (this is from my Figma design) 齐平，但到目前为止，我无法用 svg 覆盖背景的 this bottom portion。

包含 svg 的 div 位于 very bottom of it's container，因此它只是 needs to be moved

的 path 元素

到目前为止，我已经尝试使用 div.formatSvg > svg { margin-top: auto; } 将格式设置为 svg，并且我知道我可以将 svg 的位置设置为相对并使用 top: Npx; 将其移动到位，但这会导致 svg 到 @987654325 @。

我的最后一个想法是编辑 svg 本身，因为也许底部有额外的空间会导致这个问题，但我对此表示怀疑。

相关 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;
}

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

我还在headerBg 中添加了justify-content: space-between;，以强制<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>

【讨论】：