SVG高度大于Path高度，如何去除页脚SVG的多余空白？

你的问题核心是SVG的viewBox设置范围远大于路径实际占据的区域，导致容器保留了不必要的空白空间。以下是具体解决方法：

方法1：精确调整viewBox到路径边界 #

这是最彻底的解决方案，让SVG只渲染路径所在的区域：

1. 打开浏览器开发者工具，选中SVG内的<path>元素
2. 在控制台输入$0.getBBox()，会得到类似这样的结果：

   DOMRect { x: 0, y: 80.8, width: 1335, height: 90.17 }
   

3. 将SVG的viewBox属性替换为这个结果的四个值，格式为x y width height

修改后的示例代码：

<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 80.8 1335 90.17">
  <path class="cls-2" d="M924.04,146.21c-76.43,5.57-72.82,6.94-181.21,15.68-101.37,8.17-186.53,15.03-294.66,19.39-127.28,5.13-225.98,4.36-297.61,3.71-44.28-.4-94.82-1.28-150.55-3v10.98H1335v-63.26c-40.08,.65-76.99,1.52-110.4,2.47-84.89,2.41-179.64,5.22-300.56,14.03Z"></path>
</svg>

方法2：快速修复（CSS+属性调整） #

如果不想精确计算边界，可以尝试：

• 给SVG添加height="90.17"（你的路径实际高度）
• 同时设置preserveAspectRatio="xMinYMin meet"，确保路径完整显示且容器适配路径高度
• 额外添加CSS：display: block;，避免SVG作为内联元素时的基线对齐空白

示例：

<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 190.97" height="90.17" preserveAspectRatio="xMinYMin meet" style="display:block;">
  <path class="cls-2" d="M924.04,146.21c-76.43,5.57-72.82,6.94-181.21,15.68-101.37,8.17-186.53,15.03-294.66,19.39-127.28,5.13-225.98,4.36-297.61,3.71-44.28-.4-94.82-1.28-150.55-3v10.98H1335v-63.26c-40.08,.65-76.99,1.52-110.4,2.47-84.89,2.41-179.64,5.22-300.56,14.03Z"></path>
</svg>

为什么会出现空白？ #

你原SVG的viewBox="0 0 1335 190.97"定义了一个高度为190.97的画布，但你的路径只占据了其中约90.17的高度，剩下的区域就表现为底部空白。调整viewBox或强制SVG高度匹配路径高度，就能消除这些多余空间。

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