不确定如何在svg下添加另一个背景区域?[React、顺风、Typescript、NextJS]

我有一个主页,目前布局不错,一切都很好,但如果我想添加更多内容,那么页面将低于主屏幕上svg的高度。我想添加更多的内容,所以我只需要一个白色的背景在下面流动,以便从svg中“继续”,因为它是一个白色波浪图案,所以看起来它只是在继续。我不知道该怎么做。我尝试的是让它出现在屏幕顶部,或者在内容所在的svg下方有一个透明的间隙,显然我希望这个背景在内容后面。

这是我现在所拥有的,它工作得很好,但这只是因为页面上的内容没有低于svg的高度,如果低于svg,那么它只会创建透明的空间,这样我就可以看到其余的渐变背景,这不是我想要的。

使用SVG的地方:

import React from "react";

const WhiteSection: React.FC = () => {
  return (
      <div className="relative w-full">
        <svg
          id="visual"
          viewBox="0 0 900 600"
          width="900"
          height="600"
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          version="1.1"
          className="absolute top-0 left-0 w-full h-auto z-10"
        >
          <path
            d="M0 333L21.5 326.7C43 320.3 86 307.7 128.8 320.7C171.7 333.7 214.3 372.3 257.2 376.3C300 380.3 343 349.7 385.8 318.2C428.7 286.7 471.3 254.3 514.2 257C557 259.7 600 297.3 642.8 313C685.7 328.7 728.3 322.3 771.2 308.8C814 295.3 857 274.7 878.5 264.3L900 254L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
            fill="#eeeeee"
          ></path>
          <path
            d="M0 492L21.5 494C43 496 86 500 128.8 484.8C171.7 469.7 214.3 435.3 257.2 415.7C300 396 343 391 385.8 395.5C428.7 400 471.3 414 514.2 430.7C557 447.3 600 466.7 642.8 463.5C685.7 460.3 728.3 434.7 771.2 421.8C814 409 857 409 878.5 409L900 409L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
  );
};

export default WhiteSection;

如何在页面布局中使用它:

import React, { Suspense } from 'react';
import Navbar from './Navbar';
import Loading from '../../components/Loading';
import Footer from '../components/Footer';
import GradientBackground from './GradientBackground';
import WhiteSection from './WhiteSection';

const LandingLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <Suspense fallback={<Loading />}>
      <div className="relative overflow-hidden">
        <GradientBackground />
        <WhiteSection />
        <div className="relative z-30">
          <div className="fixed top-0 left-0 right-0 z-50">
            <Navbar />
          </div>
          <div className="flex flex-col min-h-screen mt-16">
            {children}
          </div>
          <div className="mt-auto z-40">
            <Footer />
          </div>
        </div>
      </div>
    </Suspense>
  );
};

export default LandingLayout;