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 浏览器兼容性的主要内容,如果未能解决你的问题,请参考以下文章

如何设计产品的兼容性测试

re9浏览器兼容问题

360浏览器兼容模式怎么设置 360浏览器怎么设置兼容模式

谷歌浏览器兼容性视图设置在哪里(chrome浏览器兼容性视图设置在哪)

为啥我的Ie浏览器出现兼容性问题

怎样调节360浏览器的JS的兼容性?