如何让SVG Footer不占用页面一半空间？

你的SVG Footer占用大量页面空间，核心问题在于路径坐标超出viewBox范围，加上未限制容器高度，导致SVG被无限制拉伸。以下是具体修复方案：

1. 修正SVG路径坐标 #

原路径里的L363.96,855.44的y值远大于viewBox设定的高度150，这会强制SVG扩大可视区域。把路径所有点的坐标调整到viewBox="0 0 500 150"的范围内，比如替换成适配底部波浪的路径：

<path
  id='footer-shadow'
  className='stroke-none'
  d='M29.86,150 C100.86,130 200.94,30 450.84,140 L500,150 L0,150 Z'
></path>

2. 限制容器与SVG的高度 #

给footer和SVG设置明确高度，避免无限制占用空间。利用Tailwind类直接指定高度（对应viewBox的150单位）：

<footer className='absolute bottom-0 w-full h-[150px]'>
  <svg
    className='fill-green w-full h-full'
    viewBox='0 0 500 150'
    preserveAspectRatio='none'
    xmlns='http://www.w3.org/2000/svg'
  >
    <defs>
      <filter id='shadow'>
        <feDropShadow
          dx='0'
          dy='0'
          stdDeviation='2'
          flood-color='#159F68'
        />
      </filter>

      <path
        id='footer-shadow'
        className='stroke-none'
        d='M29.86,150 C100.86,130 200.94,30 450.84,140 L500,150 L0,150 Z'
      ></path>
    </defs>
    <g>
      <use href='#footer-shadow' filter='url(#shadow)'></use>
      <text
        className='fill-modern-green text-sm'
        x='52%'
        y='95%'
        dominant-baseline='middle'
        text-anchor='middle'
      >
        All rights reserved.
      </text>
    </g>
  </svg>
</footer>

3. 可选：调整比例适配规则 #

如果不需要完全拉伸填充容器，可把preserveAspectRatio='none'改为preserveAspectRatio='xMidYMax meet'，让SVG保持比例并底部对齐，避免过度变形。

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