foreignObject 浏览器兼容性答案

【问题标题】：foreignObject browser compatibility [closed]foreignObject 浏览器兼容性
【发布时间】：2018-11-25 13:08:26
【问题描述】：

我想在 svg 中使用 foreignObject 来（有条件地）呈现输入字段。在有关 foreignObject 的 MDN 文档中（参见上面的链接），兼容性表在边缘显示一个问号。

换句话说 - 有Windows机器和Edge浏览器的人可以这么好心，看看下面的jsFiddle是否在红色圆圈中呈现输入：

<svg width="100%" height="500"> 
  <circle cx="120" cy="120" r="100" fill="red" />
  <foreignObject x="50" y="40" width="180" height="180">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <br/>
        <br/>
        <input />
      </div>
  </foreignObject>
</svg>

【问题讨论】：

如果您需要这样做，您可以使用 VirtualBox 并从 MS 下载 Win10 ISO，合法且免费地创建 Wn10 虚拟机。您甚至不需要使用序列号来激活它，它可能会永远保持功能。 SO 并不是真正让其他人尝试您的示例的地方（尽管我这样做了，它在 Edge 下看起来与在 Firefox 下一样）。

标签： svg cross-browser compatibility microsoft-edge

【解决方案1】：

我从 jsFiddle 和我的本地测试了 Windows 10 上 Edge 中的代码。结果如下：铬：边缘：

白框确实是输入框。

注意：在本地，我必须添加 SVG 命名空间 (xmlns="http://www.w3.org/2000/svg") 才能渲染圆圈。在 jsFiddle 中并非如此。

【讨论】：