foreignObject浏览器兼容性
foreignObject browser compatibility
我想在 svg 中使用 foreignObject 来（有条件地）呈现输入字段。在关于 foreignObject 的 MDN 文档中（参见上面的 link），兼容性 table 在边缘显示一个问号。
换句话说 - 有 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>
我在 Windows 10 上从 jsFiddle 和本地测试了 Edge 中的代码。以下是结果：
Chrome:
边缘：
白框确实是输入框
注意：在本地，我必须添加 SVG 命名空间 (xmlns="http://www.w3.org/2000/svg") 才能呈现圆圈。在 jsFiddle 中不是这样。
我想在 svg 中使用 foreignObject 来（有条件地）呈现输入字段。在关于 foreignObject 的 MDN 文档中（参见上面的 link），兼容性 table 在边缘显示一个问号。
换句话说 - 有 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>
我在 Windows 10 上从 jsFiddle 和本地测试了 Edge 中的代码。以下是结果：
Chrome:
白框确实是输入框
注意：在本地，我必须添加 SVG 命名空间 (xmlns="http://www.w3.org/2000/svg") 才能呈现圆圈。在 jsFiddle 中不是这样。