Next.js应用中表单元素被SVG背景遮挡的问题求助

我正在开发一个Next.js应用，尝试将表单元素放在SVG背景内部，但表单始终被SVG遮挡，调整z-index和定位属性后问题依然存在。简化后的代码如下：

<section className="h-screen w-full relative">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1543 1355"
    width="100%"
    height="100%"
    fill="none"
  >
    <path
      d="M423.63 46.4301L8 140.302V1001.51L771.5 1346L1535 1001.51V140.302L1119.37 46.4301C890.932 -4.81004 652.068 -4.81004 423.63 46.4301Z"
      fill="#D3C189"
      stroke="#EB596E"
      strokeWidth="15"
    />
    <form
      onSubmit={handleFormSubmit}
      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <h2 className="text-2xl text-center">Add Missions</h2>
      <Input
        placeholder="Run 3 miles"
        className="placeholder:italic"
        value={text}
        onChange={handleText}
      />
      <Button type="submit">Add</Button>
      <ToastContainer />
    </form>
  </svg>
</section>

解决方案 #

方法1：将表单与SVG同级放置（推荐） #

SVG是矢量图形容器，直接在其内部嵌套HTML元素不符合规范，会导致渲染层级和交互异常。正确的做法是把表单移到SVG外部，和SVG处于同一个父容器下：

<section className="h-screen w-full relative">
  {/* SVG作为背景 */}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1543 1355"
    width="100%"
    height="100%"
    fill="none"
  >
    <path
      d="M423.63 46.4301L8 140.302V1001.51L771.5 1346L1535 1001.51V140.302L1119.37 46.4301C890.932 -4.81004 652.068 -4.81004 423.63 46.4301Z"
      fill="#D3C189"
      stroke="#EB596E"
      strokeWidth="15"
    />
  </svg>

  {/* 表单与SVG同级，利用absolute定位叠加在SVG上方 */}
  <form
    onSubmit={handleFormSubmit}
    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
  >
    <h2 className="text-2xl text-center">Add Missions</h2>
    <Input
      placeholder="Run 3 miles"
      className="placeholder:italic"
      value={text}
      onChange={handleText}
    />
    <Button type="submit">Add</Button>
    <ToastContainer />
  </form>
</section>

方法2：使用SVG的<foreignObject>标签嵌入HTML（需严格遵循SVG规范） #

如果必须将HTML元素放在SVG内部，需要用<foreignObject>标签包裹表单，该标签专门用于在SVG中嵌入非SVG内容：

<section className="h-screen w-full relative">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1543 1355"
    width="100%"
    height="100%"
    fill="none"
  >
    <path
      d="M423.63 46.4301L8 140.302V1001.51L771.5 1346L1535 1001.51V140.302L1119.37 46.4301C890.932 -4.81004 652.068 -4.81004 423.63 46.4301Z"
      fill="#D3C189"
      stroke="#EB596E"
      strokeWidth="15"
    />

    {/* 使用foreignObject包裹HTML内容，需指定宽高和位置 */}
    <foreignObject x="0" y="0" width="100%" height="100%">
      <form
        onSubmit={handleFormSubmit}
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
      >
        <h2 className="text-2xl text-center">Add Missions</h2>
        <Input
          placeholder="Run 3 miles"
          className="placeholder:italic"
          value={text}
          onChange={handleText}
        />
        <Button type="submit">Add</Button>
        <ToastContainer />
      </form>
    </foreignObject>
  </svg>
</section>

注意：<foreignObject>的兼容性较好，但需要确保其width、height和SVG的viewBox匹配，否则内部HTML可能无法正常显示。

内容的提问来源于stack exchange，提问作者Recep Çankaya