我正在嘗試像這樣移動一個 svg 使其與我的標題背景的底部齊平（這是來自我的 Figma 設計），但到目前為止我無法用 svg覆寫背景的這個底部。
包含 svg 的 div 位于其容器的最底部，因此它只是需要移動的路徑元素
到目前為止，我已經嘗試使用 svg 設定格式div.formatSvg > svg { margin-top: auto; }，我知道我可以將 svg 的位置設定為相對并將其移動到位，top: Npx;但這會導致 svg與側邊欄重疊。
我的最后一個想法是編輯 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;
}
uj5u.com熱心網友回復：
默認情況下 SVG 是display: inline-block. 就像<img>. 因此，與其他影像一樣，它們位于文本的基線上。因此，您所看到的差距是，瀏覽器是為預留的空間伸。
解決方法是將 SVG 更改為display: block.
我還添加了一個justify-content: space-between;toheaderBg來強制<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>uj5u.com熱心網友回復：
更少的代碼更多的控制：
.headerBg {
background: linear-gradient(45deg, #d62941, #dd412f);
height: 30em;
display: flex;
flex-direction: column;
}
svg {
margin-top: auto;
}<header>
<h1 class="headerText">Lorem Ipsum</h1>
<svg viewBox="0 0 1200 120">
<path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" fill="#1E1E24"></path>
</svg>
</header>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345461.html