将含多个foreignObject的SVG嵌套于form标签，点击能否获取输入数据？

可以实现，但得注意几个关键细节：

• 现代主流浏览器（Chrome、Firefox、Safari、Edge）都支持这种嵌套结构，foreignObject允许在SVG里嵌入HTML元素，form会把SVG内部的input视为自身表单控件的一部分。
• 必须给每个input设置name属性——没有name的输入框不会被包含在表单提交的数据里，不管是后端接收还是前端JS获取都拿不到值。
• 提交和取值的方式和普通HTML表单一致：既可以用submit按钮触发默认提交，也可以用JS手动获取输入值。

可运行示例代码 #

<form id="svgForm">
  <svg width="300" height="200">
    <!-- 用户名输入框 -->
    <foreignObject x="20" y="20" width="200" height="40">
      <input type="text" name="username" placeholder="输入用户名" />
    </foreignObject>
    <!-- 邮箱输入框 -->
    <foreignObject x="20" y="80" width="200" height="40">
      <input type="email" name="useremail" placeholder="输入邮箱" />
    </foreignObject>
    <!-- 提交按钮 -->
    <foreignObject x="20" y="140" width="100" height="40">
      <button type="submit">提交</button>
    </foreignObject>
  </svg>
</form>

<script>
// 用JS监听提交事件，获取输入数据
document.getElementById('svgForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面跳转，仅在控制台打印数据
  const formData = new FormData(this);
  // 遍历输出所有字段
  for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
  }
});
</script>

额外注意事项 #

• 要给foreignObject设置合理的x、y、width、height属性，确保输入框和按钮可见且能正常交互，不然可能出现点击无反应的情况。
• 老旧浏览器（比如IE11及更早）对foreignObject支持较差，如果需要兼容这类浏览器，得考虑替代方案。

内容的提问来源于stack exchange，提问作者Esmail Alberto Ghassemi Shuaki