foreignObject浏览器兼容性

Question

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

换句话说 - 拥有Windows机器和Edge浏览器的人可以如此友善，看看下面的jsFiddle是否在红色圆圈中呈现输入：

https://jsfiddle.net/sventies/p2osc5nt/

<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>

Answer 1

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

白框确实是一个输入框。

注意：在本地，我必须添加SVG命名空间（xmlns="http://www.w3.org/2000/svg"）以使圆圈渲染。在jsFiddle中不是这样。