代码之家  ›  专栏  ›  技术社区  ›  Sventies

ForeignObject浏览器兼容性[关闭]

  •  -5
  • Sventies  · 技术社区  · 8 年前

    我想用 foreignObject 在SVG中,按条件呈现输入字段。在关于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>
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   tgiachetti    8 年前

    我在windows 10的edge中测试了jsfiddle和本地的代码。结果如下: 铬: enter image description here 边缘: enter image description here

    白框实际上是一个输入框。

    注意:在本地,我必须添加svg名称空间( xmlns="http://www.w3.org/2000/svg" )使圆渲染。在jsfiddle中不是这样。