如何将SVG的path元素移至容器底部，使其贴合header背景底部

解决方案 #

问题根源

缝隙来自两个常见原因：

• SVG默认是行内元素，自带底部的文本下行间隙
• 当前SVG路径的最低点为114.72，未和高度为120的viewBox底部完全对齐

具体修改步骤

1. 新增SVG样式消除默认间隙
   给SVG设置块级显示，去掉默认行高带来的底部缝隙，不会触发相对定位导致的侧边栏重叠问题：

.formatSvg > svg {
    display: block;
    width: 100%;
    height: auto;
}
/* 可以给formatSvg加行高0兜底 */
.formatSvg {
    margin-top: auto;
    line-height: 0;
}

2. 校准SVG路径对齐底部
   将path的d属性里的114.72改为120，让路径最低点和viewBox底部完全重合，彻底消除路径自带的底部留白：

<path d="M892.25 120L0 0 0 120 1200 120 1200 0 892.25 120z" class="shape-fill" fill="#1E1E24" fill-opacity="1"></path>

修改完成后SVG就会完全贴合header背景底部，不会出现缝隙也不会和侧边栏重叠。

内容的提问来源于stack exchange，提问作者kanwoody