foreignObject 浏览器兼容性
Posted
技术标签:
【中文标题】foreignObject 浏览器兼容性【英文标题】:foreignObject browser compatibility [closed] 【发布时间】:2018-11-25 13:08:26 【问题描述】:我想在 svg 中使用 foreignObject 来(有条件地)呈现输入字段。在有关 foreignObject 的 MDN 文档中(参见上面的链接),兼容性表在边缘显示一个问号。
换句话说 - 有Windows机器和Edge浏览器的人可以这么好心,看看下面的jsFiddle是否在红色圆圈中呈现输入:
https://jsfiddle.net/sventies/p2osc5nt/
<svg >
<circle cx="120" cy="120" r="100" fill="red" />
<foreignObject x="50" y="40" >
<div xmlns="http://www.w3.org/1999/xhtml">
<br/>
<br/>
<input />
</div>
</foreignObject>
</svg>
【问题讨论】:
如果您需要这样做,您可以使用 VirtualBox 并从 MS 下载 Win10 ISO,合法且免费地创建 Wn10 虚拟机。您甚至不需要使用序列号来激活它,它可能会永远保持功能。 SO 并不是真正让其他人尝试您的示例的地方(尽管我这样做了,它在 Edge 下看起来与在 Firefox 下一样)。 【参考方案1】:我从 jsFiddle 和我的本地测试了 Windows 10 上 Edge 中的代码。结果如下: 铬: 边缘:
白框确实是输入框。
注意:在本地,我必须添加 SVG 命名空间 (xmlns="http://www.w3.org/2000/svg"
) 才能渲染圆圈。在 jsFiddle 中并非如此。
【讨论】:
以上是关于foreignObject 浏览器兼容性的主要内容,如果未能解决你的问题,请参考以下文章